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

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

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

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

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

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

先準備好你的HTML 頁面，插入一個<canvas></canvas>元素：

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

然後在JS 中獲取上下文並啟動動畫循環(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();

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

animate(); // 啟動第一幀

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

實現(xiàn)動態(tài)效果：添加狀態(tài)變化

要讓畫面動起來，需要不斷改變某些變量。比如畫一個移動的小球：

 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;
    }
}

在這個例子裡， x表示小球的橫坐標。每一幀都更新這個值，再重新繪製，就能看到小球從左往右移動了。

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

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

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

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

 let x = 0;
let velocity = 0;

function drawSomething() {
    velocity = (targetX - x) * 0.1; // 簡單的彈性公式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)意和細節(jié)調(diào)整了。

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