requestAnimationFrame使用示例详解

下面是关于“requestAnimationFrame使用示例详解”的完整攻略：

什么是requestAnimationFrame

requestAnimationFrame 是一个在浏览器中运行的API，它能够优化动画和其它需要更新的内容的渲染。使用它可以让浏览器去控制动画的帧率，并在当前屏幕刷新前执行动画，从而避免了一些性能下降和卡顿的情况。

类比 setInterval, requestAnimationFrame 更加智能、准确可靠。

使用场景

当你需要动画的时候，可以考虑使用 requestAnimationFrame。这主要体现在两个方面：

1. 动画
2. 重绘或不断的更新界面

使用示例1

下面是一个简单的 requestAnimationFrame 实现的动画示例：

const element = document.getElementById('element');
let position = 0;
let width = 200;

function draw () {
    element.style.left = position + 'px';
    element.style.width = width + 'px';
    position += 2;
    width += 2;
    if (position < 1000) {
        requestAnimationFrame(draw);
    }
}

draw();

这个示例中，当页面第一次载入时，会调用函数 draw()， 在该函数中使用 requestAnimationFrame 去实现后续的动画。在这个动画中，元素的宽度和位置逐渐增加，直到宽度达到 1000 像素之后结束。

使用示例2

下面是一个使用 requestAnimationFrame 实现逐帧图像渲染的示例：

const canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    imagaData = context.getImageData(0,0, canvas.width,canvas.height);

function RGBAToColor(r,g,b,a) {
    return `rgba(${r}, ${g}, ${b}, ${a})`;
}

let index = 0,
    pixels = imagaData.data,
    lastTime = null;

function renderFrame (time) {
    if (!lastTime) {
        lastTime = time;
    }
    const deltaTime = time - lastTime;
    lastTime = time;
    for (let i = 0; i < 1000; i++) {
        pixels[index] = (pixels[index] + deltaTime) % 255;
        pixels[index+1] = (pixels[index+1] + deltaTime) % 255;
        pixels[index+2] = (pixels[index+2] + deltaTime) % 255;
        pixels[index+3] = 255;
        index+=4;
    }
    if (index >= pixels.length) {
        index = 0;
    }
    context.putImageData(imageData, 0, 0);
    requestAnimationFrame(renderFrame);
}

renderFrame();

在这个示例中，我们首先获取了 canvas 上下文，然后把它背景上的图像数据存储到 imageData 变量中。接着，我们在 renderFrame 函数中使用 requestAnimationFrame，该函数每次被调用时都会根据时间来更新图像数据中的颜色值，然后每一帧都重新渲染canvas，使得图像逐渐变化。