Day21 就是要對決 - CSS 和 JS 動畫，哪個更絲滑？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 21

Modern Web

不用庫也能酷 - 玩轉 CSS & Js 特效系列第 21 篇

Day21 就是要對決 - CSS 和 JS 動畫，哪個更絲滑？

15th鐵人賽

毛哥EM

2023-10-05 20:24:57

564 瀏覽

分享至

今天是第二十一天，已經走完2/3的路程，我媽還以為我早被淘汰了。這個系列明明是叫【不用庫也能酷 - 玩轉 CSS & Js 特效】，但 Js 出現了幾篇?有五篇嗎?難道 JavaScript 是來湊關鍵字的嗎?今天就來聊聊為甚麼使用純 CSS 做效果如此吸引人。

對手進場

CSS `transition` 和 `@keyframes`

就性能上來說兩者基本上沒有區別，所以我們都歸於 CSS 動畫。你可以根據使用情境來選擇使用哪一種。比如說滑鼠互動可以使用 transition，出場動畫可以使用 @keyframes。

　複習：Day4 自己動! @keyframes 與 Transition

JavaScript `requestAnimationFrame()`

requestAnimationFrame() 會在瀏覽器畫下一幀繪制之前調用。因此比設定固定時間重繪的 setTimeout() 或 setInterval()效率高得多。開發人員可以通過簡單地改變元素的樣式（或者更新畫布繪制等等）來創建動畫。

備註: 不管是 CSS 動畫還是 JavaScript 動畫，如果你離開當前頁面，動畫就會停止。比如說 Day10 永無止境跑馬燈 - 不同螢幕相同速度的跑馬燈就是如此。

如果你想要在背景執行動畫，可以使用 Web Worker。

就是要對決

我這裡使用 FireFox Developer Edition 來測試，因為它在 CSS Debug 有很多很棒的功能。而今天我們要讓他幫助我們看到動畫的 FPS。

用 Firefox 還有一個原因是他在隱私權保護方面抓得很緊，所以在 Firefox 上面能用基本上 Chromium 都不會有太大問題。

首先請你先到about:config，他很貼心請你要小心，選擇接受風險並繼續即可。

請你搜尋gfx.webrender.debug.profiler-ui

gfx.webrender.debug.profiler-ui 設為 FPS，
gfx.webrender.debug.profiler-ui 設為 true (點擊加號)。

記得先設成 FPS 再設成 true，不然整個畫面會被資訊轟炸，比 Minecraft 的 F3 還要誇張好幾倍。

接下來是暖暖包時間，我們要來翻滾1000個 <div> 正方形。你可以自行貼上以下程式碼，或是用我的。然後點擊切換按鈕來切換動畫方式。

<div id="header">
  <button id="toggle-button">切换</button>
  <span id="type">CSS Animation</span>
</div>
<div id="box-container"></div>

#header {
  position: sticky;
  top: 0.5rem;
  margin: 0 0.5rem;
  z-index: 100;
  background-color: lightgreen;
}

#box-container {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 15px;
}

.box {
  width: 30px;
  height: 30px;
  background-color: red;
}

.css-animation {
  animation: animate 6s linear 0s infinite alternate;
}

@keyframes animate {
  0% {
    transform: translateX(0) rotate(0deg) scale(0.6);
  }
  100% {
    transform: translateX(500px) rotate(360deg) scale(1.4);
  }
}

const boxes = [];
const button = document.getElementById("toggle-button");
const boxContainer = document.getElementById("box-container");
const animationType = document.getElementById("type");

// create boxes
for (let i = 0; i < 1000; i++) {
  const div = document.createElement("div");
  div.classList.add("css-animation");
  div.classList.add("box");
  boxContainer.appendChild(div);
  boxes.push(div.style);
}

let toggleStatus = true;
let rafId;
button.addEventListener("click", () => {
  if (toggleStatus) {
    animationType.textContent = " requestAnimationFrame";
    for (const child of boxContainer.children) {
      child.classList.remove("css-animation");
    }
    rafId = window.requestAnimationFrame(animate);
  } else {
    window.cancelAnimationFrame(rafId);
    animationType.textContent = " CSS animation";
    for (const child of boxContainer.children) {
      child.classList.add("css-animation");
    }
  }
  toggleStatus = !toggleStatus;
});

const duration = 6000;
const translateX = 500;
const rotate = 360;
const scale = 1.4 - 0.6;
let start;
function animate(time) {
  if (!start) {
    start = time;
    rafId = window.requestAnimationFrame(animate);
    return;
  }

  const progress = (time - start) / duration;
  if (progress < 2) {
    let x = progress * translateX;
    let transform;
    if (progress >= 1) {
      x = (2 - progress) * translateX;
      transform = `translateX(${x}px) rotate(${
        (2 - progress) * rotate
      }deg) scale(${0.6 + (2 - progress) * scale})`;
    } else {
      transform = `translateX(${x}px) rotate(${progress * rotate}deg) scale(${
        0.6 + progress * scale
      })`;
    }

    for (const box of boxes) {
      box.transform = transform;
    }
  } else {
    start = null;
  }
  rafId = window.requestAnimationFrame(animate);
}