用JS做動畫的核心是變化與時間控制，通過requestAnimationFrame實現(xiàn)流暢動畫。 1. 使用requestAnimationFrame控制節(jié)奏，傳入回調(diào)函數(shù)並利用瀏覽器提供的當(dāng)前時間戳參數(shù)，避免卡頓和掉幀問題。 2. 通過修改CSS屬性如transform和opacity實現(xiàn)視覺變化，優(yōu)先選擇性能更友好的屬性。 3. 封裝動畫函數(shù)提升復(fù)用性，例如moveElement函數(shù)可靈活傳遞元素、目標(biāo)位置和持續(xù)時間等參數(shù)。 4. 考慮使用庫簡化複雜功能開發(fā)，GSAP、anime.js、Velocity.js等庫提供兼容性和性能優(yōu)化方案，適合快速開發(fā)複雜動效。掌握幀和變化的關(guān)係後，實現(xiàn)簡單動畫將更加高效。

用JS 做動畫其實沒那麼神秘，說白了就是不斷修改元素的樣式屬性，讓瀏覽器一幀一幀地畫出來。核心思路就兩個字：變化時間控制。

1. 使用requestAnimationFrame 控制動畫節(jié)奏

如果你直接用setInterval或setTimeout來做動畫，可能會遇到卡頓、掉幀的問題。這時候就要用到requestAnimationFrame ，它是專門為動畫設(shè)計的API，瀏覽器會自動優(yōu)化渲染時機。

舉個例子：你想讓一個div 向右移動，每幀更新它的left樣式值就可以了：

 let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  let progress = timestamp - start;
  let element = document.getElementById("box");
  element.style.left = Math.min(progress / 10, 200) "px";

  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

關(guān)鍵點：

• 每次調(diào)用requestAnimationFrame都傳入一個回調(diào)函數(shù)
• 回調(diào)參數(shù)是當(dāng)前時間戳（由瀏覽器提供）
• 控制動畫結(jié)束條件很重要，否則會無限執(zhí)行下去

2. 修改CSS 屬性實現(xiàn)視覺變化

JS 動畫的本質(zhì)是不斷修改DOM 元素的樣式。你可以操作內(nèi)聯(lián)樣式，也可以通過添加/刪除class 的方式來切換CSS 動畫狀態(tài)。

常見做法有：

• 直接設(shè)置element.style.transform
• 修改element.style.opacity實現(xiàn)透明度變化
• 設(shè)置element.style.top/left控制定位位置

建議優(yōu)先使用transform和opacity ，因為它們對性能更友好，尤其是GPU 加速的部分。

3. 簡單封裝自己的動畫函數(shù)

寫多了你會發(fā)現(xiàn)每次都要寫一堆重複代碼，不如簡單封裝一下：

 function moveElement(element, targetX, duration) {
  let start = null;
  const startX = parseInt(window.getComputedStyle(element).left);
  const distance = targetX - startX;

  function step(timestamp) {
    if (!start) start = timestamp;
    let progress = timestamp - start;
    let percent = Math.min(progress / duration, 1);
    element.style.left = startX distance * percent "px";

    if (percent < 1) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

這樣你就可以復(fù)用動畫邏輯，傳入不同的參數(shù)就能動不同的元素。

4. 可以考慮用庫簡化工作

雖然原生JS 能實現(xiàn)動畫，但如果你需要復(fù)雜的動畫鏈、緩動函數(shù)、滾動觸發(fā)等功能，可以考慮使用現(xiàn)成的庫，比如：

• GSAP ：功能強大，適合複雜動畫
• anime.js ：輕量級，API 友好
• Velocity.js ：類似jQuery 的動畫風(fēng)格

這些庫已經(jīng)幫你處理了很多細節(jié)，比如兼容性、性能優(yōu)化等，適合項目中快速開發(fā)。

基本上就這些，JS 做動畫不難，關(guān)鍵是理解“幀”和“變化”的關(guān)係。只要掌握了節(jié)奏控制和樣式更新的方法，自己寫個小動效其實很快。

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