JavaScript 애니메이션 구현에 대한 자세한 소개

서문

요즘에는 많은 페이지에 애니메이션 효과가 있습니다. 적절한 애니메이션 효과는 페이지의 아름다움을 어느 정도 향상시킬 수 있고, 프롬프트 효과가 있는 애니메이션은 페이지의 사용성을 향상시킬 수 있습니다.

페이지 애니메이션을 구현하는 방법에는 두 가지가 있습니다. 하나는 JavaScript를 조작하여 CSS 스타일을 간접적으로 조작하고 를 주기적으로 업데이트하는 것이고, 다른 하나는 CSS를 통해 직접 애니메이션을 정의하는 것입니다. 두 번째 방법은 CSS3가 성숙해진 후에 널리 채택되었습니다. 이 글에서는 첫 번째 방법의 원리와 구현에 대해 논의합니다.

JavaScript 애니메이션 구현 원리

우선 애니메이션 시간 과정과 애니메이션 효과 과정이라는 두 가지 중요한 개념을 알아야 합니다.

애니메이션 타임 프로세스는 애니메이션이 완성되는 과정을 시간으로 표현하며, [0, 1] 사이의 숫자입니다. 애니메이션이

타임스탬프 에서 시작하여 t1에서 끝나고 현재 타임스탬프가 t2라고 가정하면 애니메이션의 현재 시간 진행 상황은 t입니다. 이해가 안 되신다면 펜과 종이로 그려보시는 걸 추천드려요. 이 개념을 이해하는 것은 이 기사를 이해하는 데 중요합니다. (t-t1)/(t2-t1)

애니메이션 효과 프로세스는 애니메이션화되는

속성 값 의 현재 증분을 나타냅니다. <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a> 속성을 ​​변경하고 싶다고 가정해 보겠습니다. 의 > 요소가 #el로 변경되고, 현재는 <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>로 변경되었으므로 현재 애니메이션의 효과과정은 100px입니다. 200px130px애니메이션 시간 과정과 애니메이션 효과 과정이 모두 선형이라고 가정합니다. 그래서 애니메이션의 시간과정을 알면 애니메이션 효과과정을 확실히 알 수 있습니다. 130px - 100px = 30px

이 설명에 따르면 선형 애니메이션을 빠르게 프로그래밍할 수 있습니다.

(function() {
      var begin, // 开始动画的时间
        el, start, end, duration; 
      var INTERVAL = 13;

      function now() {
        return (new Date).getTime();
      }

      /**
       * 执行一步动画（更新属性）
       */
      function _animLeft() {
        var pos = (now() - begin) / duration;
        if (pos >= 1.0) {
          return false;
        }
        return !!(el.style.left = start + (end - start) * pos);
      }

      /**
       * 对一个DOM执行动画，left从_start到_end，执行时间为
       * _duration毫秒。
       * 
       * @param  {object} _el       要执行动画的DOM节点
       * @param  {integer} _start   left的起始值
       * @param  {integer} _end     left的最终值
       * @param  {integer} _duration  动画执行时间
       */
      function animLeft(_el, _start, _end, _duration) {
        stopped = false;
        begin = now();
        el = _el;
        start = _start;
        end = _end;
        duration = _duration || 1000;

        var step = function() {
          if (_animLeft()) {
            setTimeout(step, INTERVAL);
          }
        };
        setTimeout(step, 0);
      }

      window.animLeft = animLeft;
    })();

    animLeft(
      document.getElementById('el'),
      100,
      200
    )

JSBin

easing

우리에게 필요한 애니메이션은 선형이 아닌 경우가 많습니다. 직관적으로 말하면 소위 비선형성은 애니메이션 속도가 시간에 따라 변한다는 것을 의미합니다. 그렇다면 가변 속도 애니메이션을 구현하는 방법은 무엇입니까?

위에서 언급했듯이 애니메이션의 시간 과정을 제어하는 ​​것은 애니메이션의 효과 프로세스를 제어하는 ​​것과 동일하다는 것을 알고 있습니다. 현실 세계에서 시간이 진행됨에 따라 애니메이션의 시간 진행도 따라가게 되어 애니메이션의 효과 진행을 제어할 수 있습니다. 그런 다음 실제 시간 프로세스와 애니메이션 시간 프로세스 간의 매핑 관계를 수정하여 애니메이션 프로세스를 제어할 수 있습니다. 헷갈리시더라도 상관없습니다. 아래 그림을 보세요.

이것은 실제 시간 과정과 애니메이션 과정의 매핑 관계입니다. 선형 애니메이션. 다음으로

변환합니다. 이 곡선은 실제로 함수

의 이미지입니다. 두 곡선의 정의 영역과 값 범위는 변경되지 않았음을 알 수 있습니다. 곡선의 기울기는 애니메이션의 속도입니다. 다음으로 비교를 위해 두 사진을 겹칩니다. y = x * x

실제 시간이 에 도달하면 애니메이션 프로세스는 원래

로 진행되어야 하지만 변환 후에는

으로만 진행됩니다. 결국 모든 강은 바다로 돌아가고, 두 선은 (1, 1) 지점에서 만난다. 여기서 x0는 y0 easing 함수 y1입니다. y = x * x위의 예를 수정하여 애니메이션을 비선형으로 만들어 보겠습니다.

function ease(time) {
      return time * time;
    }

    /**
     * 执行一步动画（更新属性）
     */
    function _animLeft() {
      var pos = (now() - begin) / duration;
      if (pos >= 1.0) {
        return false;
      }
      pos = ease(pos);
      return !!(el.style.left = (start + (end - start) * pos) + "px");
    }

JSBin

jQuery

의 코드에서 이러한 함수를 볼 수 있습니다.

jQuery.easing = {
      linear: function( p ) {
        return p;
      },
      swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
      }
    };

따라서 jQuery.easing에 easing 함수를 추가하여 jQuery가 새로운 애니메이션 속도 제어 방법을 지원하도록 할 수 있습니다. 여유 함수의 도메인과 값 범위는 [0, 1]이어야 합니다.

 jQuery.easing.myEasing = function( p ) { return ... }

요약

자바스크립트 애니메이션은 기본적으로 CSS를 조작하여 애니메이션을 실행합니다. 애니메이션의 시간 진행은 애니메이션의 효과 진행을 결정할 수 있습니다. 현실 세계의 시간 흐름과 애니메이션의 시간 흐름 사이의 관계를 조작함으로써 선형 애니메이션을 비선형 애니메이션으로 변환할 수 있습니다.

위 내용은 JavaScript 애니메이션 구현에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!