使用requestAnimationFrame() 在HTML Canvas 上實(shí)現(xiàn)流暢動(dòng)畫的關(guān)鍵在於理解其運(yùn)行機(jī)制並配合Canvas 的繪製流程。 1. requestAnimationFrame() 是瀏覽器專為動(dòng)畫設(shè)計(jì)的API，能與屏幕刷新率同步，避免卡頓或撕裂，並比setTimeout 或setInterval 更高效；2. 動(dòng)畫基礎(chǔ)結(jié)構(gòu)包括準(zhǔn)備canvas 元素、獲取上下文、定義主循環(huán)函數(shù)animate()，其中清除畫布並請(qǐng)求下一幀以持續(xù)重繪；3. 實(shí)現(xiàn)動(dòng)態(tài)效果需在每一幀中更新狀態(tài)變量，如小球的坐標(biāo)，從而形成連續(xù)動(dòng)畫；4. 提升表現(xiàn)力可通過添加時(shí)間控制保證速度一致性、使用雙緩衝技術(shù)優(yōu)化渲染、用easing 函數(shù)增強(qiáng)運(yùn)動(dòng)自然度等方法實(shí)現(xiàn)。掌握這些核心要點(diǎn)後，即可通過創(chuàng)意和細(xì)節(jié)調(diào)整製作出豐富多樣的動(dòng)畫效果。

想用requestAnimationFrame()在HTML Canvas 上做出流暢動(dòng)畫？這其實(shí)不難，關(guān)鍵是理解它的運(yùn)行機(jī)制和配合Canvas 的繪製流程。

基本原理：為什麼選requestAnimationFrame()

requestAnimationFrame()是瀏覽器專門為動(dòng)畫設(shè)計(jì)的API。它會(huì)在下一次重繪之前調(diào)用指定的函數(shù)，這樣能保證動(dòng)畫與屏幕刷新率同步（通常是60Hz，也就是每秒60 幀），從而避免卡頓或撕裂。

相比setTimeout或setInterval ，它更高效，因?yàn)闉g覽器可以自動(dòng)優(yōu)化多個(gè)動(dòng)畫、減少資源佔(zhàn)用，甚至在頁(yè)面不可見時(shí)暫停執(zhí)行。

搭建基礎(chǔ)結(jié)構(gòu)：Canvas 和主循環(huán)

先準(zhǔn)備好你的HTML 頁(yè)面，插入一個(gè)<canvas></canvas>元素：

 <canvas id="myCanvas" width="800" height="600"></canvas>

然後在JS 中獲取上下文並啟動(dòng)動(dòng)畫循環(huán)：

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function animate() {
    // 清除畫布ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 繪製內(nèi)容drawSomething();

    // 請(qǐng)求下一幀requestAnimationFrame(animate);
}

animate(); // 啟動(dòng)第一幀

關(guān)鍵點(diǎn)是每次繪製前清空畫布，否則上一幀的內(nèi)容會(huì)殘留。這個(gè)結(jié)構(gòu)是你所有動(dòng)畫邏輯的基礎(chǔ)。

實(shí)現(xiàn)動(dòng)態(tài)效果：添加狀態(tài)變化

要讓畫面動(dòng)起來，需要不斷改變某些變量。比如畫一個(gè)移動(dòng)的小球：

 let x = 0;

function drawSomething() {
    ctx.beginPath();
    ctx.arc(x, 100, 10, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();

    x = 2;
    if (x > canvas.width) {
        x = 0;
    }
}

在這個(gè)例子裡， x表示小球的橫坐標(biāo)。每一幀都更新這個(gè)值，再重新繪製，就能看到小球從左往右移動(dòng)了。

如果你希望動(dòng)畫速度不受幀率影響，建議加上時(shí)間控制，比如記錄開始時(shí)間，計(jì)算經(jīng)過的時(shí)間差來決定位置。

提高表現(xiàn)力：加點(diǎn)細(xì)節(jié)讓它更自然

• 雙緩衝技術(shù)不是必須的，但你可以考慮離屏渲染複雜圖形，再一次性畫到主canvas 上。
• 如果你有多個(gè)動(dòng)畫對(duì)象，可以用數(shù)組保存它們的狀態(tài)，在每一幀統(tǒng)一更新和繪製。
• 動(dòng)畫結(jié)束時(shí)記得別忘了停止循環(huán)，雖然大多數(shù)時(shí)候你是無限循環(huán)的。
• 使用easing 函數(shù)可以讓運(yùn)動(dòng)更自然，比如緩入緩出。

例如，給上面的小球加個(gè)緩出效果：

 let x = 0;
let velocity = 0;

function drawSomething() {
    velocity = (targetX - x) * 0.1; // 簡(jiǎn)單的彈性公式x = velocity;

    ctx.beginPath();
    ctx.arc(x, 100, 10, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
}

基本上就這些。只要掌握了基本結(jié)構(gòu)和變化方式，剩下的就是創(chuàng)意和細(xì)節(jié)調(diào)整了。

以上是如何使用requestAnimationFrame（）在畫布上創(chuàng)建動(dòng)畫？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！