JavaScript requestAnimationFrame 애니메이션 상세 설명

웹 2.0 시대 에 접어 들 면서 웹 페이지 에서 애니메이션 을 실현 하 는 것 은 더 이상 한 방법 에 국한 되 지 않 았 다.

CSS 3 의 animation+keyframes 를 사용 할 수 있 습 니 다

당신 도 css 3 의 transition 을 사용 할 수 있 습 니 다

4.567917.canvas 에서 그림 을 그 려 애니메이션 을 실현 할 수 있 고 jQuery 애니메이션 과 관련 된 API 를 통 해 편리 하 게 실현 할 수 있 습 니 다4.567917.물론 가장 원시 적 인 것 은 window.setTimout()나 window.setInterval()을 사용 하여 요소 의 상태 위치 등 을 계속 업데이트 하여 애니메이션 을 실현 할 수 있 습 니 다.전 제 는 화면의 업데이트 빈도 가 1 초 에 60 번 이 되 어야 유창 한 애니메이션 효 과 를 육안 으로 볼 수 있 습 니 다JavaScript requestAnimationFrame 알 아 보기
일단 소스 코드 를 살 펴 보 겠 습 니 다.
requestAnimationFrame on github

// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon

// MIT license

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

(function() {
 'use strict';

 var vendors = ['ms', 'moz', 'webkit', 'o'];
 //     
 for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
 //              
  var vp = vendors[i];
  window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
  window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
         || window[vp+'CancelRequestAnimationFrame']);
 }
 if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
  || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
  //             setTimeout clearTimeout
  var lastTime = 0;
  window.requestAnimationFrame = function(callback) {
   var now = Date.now();
   var nextTime = Math.max(lastTime + 16, now);
   return setTimeout(function() { callback(lastTime = nextTime); },
        nextTime - now);
  };
  window.cancelAnimationFrame = clearTimeout;
 }
}());

그 소스 코드 의 읽 기 는 모두 에 게 문제 가 없다 고 믿 습 니 다.읽 을 수 없어 도 괜 찮 습 니 다.api 를 호출 하면 됩 니 다.
requestAnimationFrame 의 장점
브 라 우 저 는 병행 하 는 애니메이션 동작 을 최적화 시 키 고 동작 순 서 를 합 리 적 으로 재 배열 하 며 합 칠 수 있 는 동작 을 렌 더 링 주기 에 놓 아 완성 하여 더욱 유창 한 애니메이션 효 과 를 나 타 낼 수 있 습 니 다.예 를 들 어 requestAnimationFrame()을 통 해 JS 애니메이션 은 CSS 애니메이션/변환 또는 SVG SMIL 애니메이션 과 동기 화 할 수 있 습 니 다.또한 브 라 우 저 탭 에서 애니메이션 을 실행 하면 이 탭 이 보이 지 않 을 때 브 라 우 저 는 이 를 중단 합 니 다.이것 은 CPU,메모리 의 압력 을 줄 이 고 배터리 전 기 를 절약 할 수 있 습 니 다.
사용법 예시:

function animate() {
  console.log("animation");
  window.requestAnimationFrame(animate);
 }
animate();

requestAnimationFrame(animate)이 관건 입 니 다.실행 할 함수 에 애니메이션 을 설정 하기 때문에 브 라 우 저 콘 솔 에서 animate()함 수 를 계속 실행 합 니 다.
브 라 우 저 호환성

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.