HTML5 탐색: requestAnimationFrame으로 웹 애니메이션 최적화

브라우저 애니메이션 프로그램에서는 일반적으로 타이머를 사용하여 몇 밀리초마다 대상 개체를 순환하여 움직이게 합니다. 이제 좋은 소식은 브라우저 개발자가 결정했다는 것입니다. 사용자를 위해 애니메이션을 최적화할 수 있도록 브라우저에 이러한 API를 제공하는 것이 어떨까요? 따라서 이 requestAnimationFrame() 함수는 애니메이션 효과를 위한 API이며 DOM이나 캔버스 애니메이션 또는 WebGL의 스타일 변경에 사용할 수 있습니다.

브라우저는 병렬 애니메이션 동작을 최적화하고 동작 순서를 보다 합리적으로 재배치하며 하나의 렌더링 주기에 결합할 수 있는 동작을 완료하여 보다 부드러운 애니메이션 효과를 제공할 수 있습니다. 예를 들어, requestAnimationFrame()을 통해 JS 애니메이션은 CSS 애니메이션/변환 또는 SVG SMIL 애니메이션과 동시에 발생할 수 있습니다. 또한, 브라우저 탭에서 애니메이션을 실행하면 탭이 보이지 않을 때 브라우저가 애니메이션을 일시 정지시켜 CPU와 메모리에 대한 부담을 줄이고 배터리 전원을 절약할 수 있습니다.

 // setTimeout이 포함된 shim 레이어 fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// setInterval(render, 16) 대신 사용법:// ....(함수 animloop(){ requestAnimFrame(animloop); render();})();// rAF를 render() *앞*에 배치하여 setTimeout fallback을 사용하여 60fps에 가깝게 보장합니다.

requestAnimationFrame의 보다 안정적인 캡슐화

Opera 브라우저 기술자 Erik Möller는 다양한 브라우저와 더 잘 호환되도록 이 기능을 캡슐화했습니다. 이 기사를 읽을 수 있지만 기본적으로 그의 코드는 60fps에 가장 적합하도록 4ms 또는 16ms 지연을 사용할지 여부를 결정합니다. 아래는 이 코드입니다. 사용할 수 있지만 이 코드는 표준 기능을 사용하며 다양한 브라우저 엔진과 호환되는 접두어를 추가했습니다.

 (function() { var lastTime = 0; var Vendors = ['webkit', 'moz']; for(var x = 0; x < Vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) };}())

requestAnimationFrame을 사용했을 때의 효과를 살펴보겠습니다.

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // 유닉스 시간});

콜백 함수의 매개변수는 시간에 맞춰 전달될 수 있습니다.

requestAnimationFrame에 대한 다양한 브라우저 지원

Google Chrome, Firefox 및 IE10+는 모두 이 기능을 구현합니다. 브라우저가 매우 오래된 경우에도 위의 requestAnimationFrame 캡슐화를 사용하면 IE8/9에서 이 메서드를 오류 없이 만들 수 있습니다.