HTML5의 requestAnimationFrame 함수

HTML5를 지원하는 웹브라우저 기반의 JavaScript의 window 객체에는 requestAnimationFrame 함수가 정의되어 있습니다. 더 정확히는, 이 함수는 WebGL의 지원과 함께 제공됩니다. 이 함수는 지정된 연산(함수)의 호출을 다른 연산에 방해를 주지 않고 최대한 빨리 호출해 주는 함수입니다. 웹GL에서 이 함수의 용도를 충분히 짐작할 수 있습니다.

네, 아래의 애니메이션은 requestAnimationFrame 함수를 사용한 예제 입니다. 이 예제를 통해 requestAnimFrame 함수에 대해 정리해 보겠습니다.

위의 예제에 대한 코드를 살펴보겠습니다. 먼저 애니메이션이 이루어지는 캔버스에 대한 정의 코드입니다.

다음은 requestAnimationFrame 함수가 아직 지원이 되지 않을 경우, 또는 브러우저 마다 서로 다른 이름으로 함수로 제공되는 문제에 대한 해법으로 일괄적으로 requestAnimFrame이라는 함수로 지원되도록 하는 코드입니다.

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame ||
    function(callback) { window.setTimeout(callback, 1000 / 60); };
})();

위의 코드를 보면 만약 어떠한 requestAnimationFrame 함수도 지원되지 않을 경우 1000/60밀리초 후에 발생하는 Timer를 사용하고 있습니다.

다음은 캔버스에 사각형을 렌더링하고 애니메이션을 수행하는 코드입니다.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var myRectangle = {
    x: 0,
    y: 75,
    width: 100,
    height: 50,
    borderWidth: 5
};

drawRectangle(myRectangle, context);

setTimeout(function() {
    var startTime = (new Date()).getTime();
        animate(myRectangle, canvas, context, startTime);
    }, 2000);

4번 코드가 캔버스에 렌더링할 사각형의 스펙입니다. 12번 코드를 통해 이 사각형의 스펙대로 렌더링합니다. 그리고 14번 코드에서 2초 후에 animation 함수를 호출하고 있는데요. 바로 이 animation 함수가 실제 requestAnimFrame 함수를 이용하여 애니메이션을 수행하는 함수입니다.

drawRectangle 함수는 다음과 같습니다.

function drawRectangle(rect, context) {
    context.beginPath();
    context.rect(rect.x, rect.y, rect.width, rect.height);
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.lineWidth = rect.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
}

그리고 animation 함수는 다음과 같습니다.

function animate(rect, canvas, context, startTime) {
    var time = (new Date()).getTime() - startTime;
    var linearSpeed = 100;
    var newX = linearSpeed * time / 1000;

    if(newX < canvas.width - rect.width - rect.borderWidth / 2) {
        rect.x = newX;
    }

    context.clearRect(0, 0, canvas.width, canvas.height);

    drawRectangle(rect, context);

    requestAnimFrame(function() {
        animate(rect, canvas, context, startTime);
    });
}

2~4번 코드는 사각형를 움직이도록 새롭게 설정할 x 좌표값을 계산하여 newX 변수에 할당합니다. 6~8번 코드는 계산한 newX 변수를 사각형의 x 속성에 할당하는 것으로써 만약 사각형이 캔버스 밖으로 벗어나지 않도록 하고 있습니다. 10번 코드는 새로운 위치의 사각형을 그리기에 앞서 화면을 지우는 코드이고 12번 코드는 실제로 화면에 사각형을 그리는 함수의 호출이며, 14~16번이 바로 requestAnimFrame 함수를 통해 animate 함수를 호출해 주는 것입니다. 이처럼 animate 함수의 호출을 requestAnimFrame 함수를 통해 등록해 놓으면 가장 적합하고 빠른 시점에 animate 함수를 호출해주게 됩니다.

답글 남기기 응답 취소