requestAnimationFrame을 사용한 간단한 애니메이션

코어 포인트

는 브라우저의 드로잉 사이클과 동기화 된 애니메이션을 작성하는 데 사용되는 도우미 기능으로, 더 부드럽고 CPU 절약 된 애니메이션 효과를 달성합니다. 모든 최신 브라우저에서 지원되며 이전 브라우저와 호환됩니다.

• requestAnimationFrame를 사용하여 생성 된 함수는 일련의 함수를 순서대로 호출하여 애니메이션 시퀀스를 구현하도록 설계 될 수 있습니다. 이 기능은 애니메이션의 진행 상황을 추적하고 애니메이션의 종료 시간을 계산할 수 있습니다.
브라우저의 새로 고침 속도와 동기식으로 작동하기 때문에
• 또는 requestAnimationFrame보다 더 효율적으로 애니메이션을 만듭니다. 모든 JavaScript 프레임 워크 또는 라이브러리와 함께 사용할 수 있으며 CSS 속성, 캔버스 애니메이션, SVG 애니메이션, 스크롤 또는 사용자 상호 작용 기반 애니메이션을 포함한 다양한 애니메이션을 처리 할 수 ​​있습니다. animate
dom 요소 애니메이션에는 몇 밀리 초마다 CSS 스타일을 수정하여 모션의 환상을 만듭니다. 즉, 콜백 함수를
• 로 전달하고 해당 콜백 함수에서 노드의 스타일 객체를 수정하는 것을 의미합니다. 그런 다음 를 다시 호출하여 다음 애니메이션 프레임을 대기하십시오. 이 새로운 도우미 기능은 애니메이션에 대한 것이 었습니다. 처음에는 Firefox 4에서 볼 수 있었고 IE 10을 포함한 모든 브라우저에서 점차 채택되었습니다. 다행히도 이전 브라우저와 호환되기 쉽습니다. requestAnimationFrame setTimeout setInterval (지정된 시간 지연 후에 실행)와 달리
는 다음에 브라우저가 화면을 그릴 때 콜백 함수를 실행합니다. 이를 통해 브라우저의 드로잉 사이클과 동기화하여 너무 자주 그리거나 자주 그리지 않도록 애니메이션이 매우 매끄럽고 CPU에 과부하가 걸리지 않습니다.

브라우저 호환성 처리 setTimeout 현재 모든 브라우저는 의 접두사 버전이 있으므로 지원되는 버전을 감지하고 참조하십시오. setTimeout 는 창 객체의 속성에 액세스하기 위해 사각형 브래킷 표기법을 사용하는 방법에 유의하십시오. 문자열 연결을 사용하여 속성 이름을 동적으로 구축하기 때문에 사각형 브래킷 표기법을 사용합니다. 브라우저가 지원하지 않으면 60 밀리 초 후에 requestAnimationFrame를 호출하여 유사한 효과를 달성하는 일반 기능으로 돌아갑니다.

애니메이션 기능 구성

window.requestAnimationFrame(callbackFunction);

이제 애니메이션을 시뮬레이션하기 위해 반복적으로 우리의

를 호출하는 간단한 함수를 만들어 봅시다. 애니메이션을 구현하려면 엔트리 포인트로서 외부 함수와 반복적으로 호출되는 내부 기능 (단계 함수라고 함)이 필요합니다. setTimeout

window.requestAnimationFrame(callbackFunction);

우리가 단계 함수를 호출 할 때마다 애니메이션의 진행 상황을 추적하여 언제 종료되는지 알아야합니다. 우리는 애니메이션이 끝나야하는 시간을 계산하고 각주기에 대한 남은 시간에 따라 진행 상황을 계산합니다.

우리는 현재 시간을 밀리 초로 얻기 위해

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

를 사용하고 있습니다. 플러스 부호는 날짜 개체를 숫자 데이터 유형으로 시전합니다. 변수는 0과 1 사이의 숫자이며 애니메이션의 진행률을 나타냅니다.

new Date() 애니메이션 기능 개선 rate

이제 우리는 함수의 입력과 출력을 고려해야합니다. 함수가 함수와 지속 시간을 매개 변수로 받아들이도록합시다.

우리는이 기능을 다음과 같이 호출 할 수 있습니다

함수에서는 노드의 너비를 "100px"에서 "300px"로 애니메이션하는 코드를 배치합니다.

function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}

개선 된 애니메이션 함수

그것은 잘 작동하지만, 내가 정말로 원하는 것은 순서대로 호출되는 다양한 함수를 입력 할 수 있다는 것입니다. 이런 식으로 첫 번째 애니메이션이 끝나면 두 번째 애니메이션이 시작됩니다. 우리는 배열을 스택으로 취급하여 한 번에 하나씩 항목을 팝업 할 것입니다. 입력을 변경해 봅시다 :

function animate() {
  var duration = 1000 * 3,  // 3 秒
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {       // 如果剩余时间少于 60 毫秒，则在此结束动画
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 执行一些动画操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

애니메이션이 처음 실행되면

는 NULL이고 run는 60 밀리 초 미만이므로 어레이에서 첫 번째 항목을 팝업하여 실행을 시작합니다. 애니메이션의 마지막 프레임에서

도 60 미만이므로 현재 애니메이션을 완료하고 배열에서 다음 항목을 팝업하고 다음 항목을 애니메이션하기 시작합니다. 또한 완화 공식을 통해

function animate(item) {
  var duration = 1000 * item.time,
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      item.run(1);  // 1 = 进度为 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}

값을 통과했습니다. 0에서 1의 값은 이제 입방 비율로 자라서 덜 뻣뻣 해 보입니다. 애니메이션 기능을 호출하려면 다음을 수행합니다.

상자의 너비는 먼저 팽창하여 2 초를 차지한 다음 높이가 팽창하고 2 초를 차지합니다. 코드 최적화

코드를 조금 정리해 봅시다. 우리는 를 여러 번 부르며별로 좋지 않습니다. 시작하고 시작하는 동안 캐시를하고 캐시를 보자.

는 함수가 항상 자체 포함 된 물체의 일부이며 변수를 통해 객체의 모든 속성에 액세스 할 수 있기 때문에 기본 함수를 수정할 필요가 없습니다. 이제 단계 함수를 실행할 때마다 모든 변수를 캐시합니다. 그게 다야.

animate({
  time: 3,  // 以秒为单位的时间
  run: function(rate) { /* 使用 rate 执行某些操作 */ }
});

를 활용하고 이전 브라우저에 대한 폴백을 제공하는 간단한 애니메이션 도우미 기능.

item (이 환경에서 JavaScript 코드를 실행할 수 없으므로 스크립트 데모 부분은 생략됩니다.) remaining (간단한 애니메이션에 requestAnimationFrame을 사용하는 FAQ 섹션은 콘텐츠가 원본 텍스트에서 크게 복제되어 있기 때문에 생략되며 의사 원리를 완료하기 위해 핵심 포인트 만 유지하면됩니다.) > remaining

위 내용은 requestAnimationFrame을 사용한 간단한 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!