深入動態效果設計 - 複雜動畫與效能優化

當我們踏入網頁動效的世界時，尤其是從簡單的過渡效果一路進階到複雜動效，挑戰隨之而來。
Vue 與現今瀏覽器本身表現已經非常優秀，大部分情況下頁面都能保持流暢，但如果你想追求更快、更優雅的動效體驗，讓我們來看看怎麼更進一步優化吧！

進階動效過渡效果

我們來點不同的吧！
讓文字在滑鼠懸停時向上移動，呈現出「跳起來」的效果，讓網頁更加絲滑流暢。

• 完整程式碼

<script lang="ts" setup>
const message = "Hello, I ❤️ Coding !".split("");
</script>

<template>
  <div
    class="flex flex-col items-center justify-center h-screen overflow-hidden text-30 bg-gradient-to-br from-[#91defe] via-[#99c0f9] to-[#f9bccc]"
  >
    <transition name="fade">
      <div class="flex space-x-2 cursor-pointer">
        <span
          v-for="(char, index) in message"
          :key="index"
          class="hover:transform hover:-translate-y-20 transition-transform duration-300 ease-out"
        >
          {{ char }}
        </span>
      </div>
    </transition>
  </div>
</template>

<style scoped>
/* 顯示時的初始狀態 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

• v-for 循環顯示每個字元：使用 v-for 循環將 message 字串拆分成單個字元，每個字元都被包裹在一個 <span> 標籤中，這樣可以單獨對每個字元進行操作。

• hover 動畫效果：

  • 當滑鼠懸停在單個字元上時，使用 UnoCSS 的 hover:transform 和 hover:-translate-y-2 工具類實現字元向上移動的效果。
  • transition-transform duration-300 ease-out 確保動畫具有平滑的過渡效果，並且使用 GPU 加速來提高效能。

• Vue transition 動畫：

  • 使用 Vue 的 transition 組件來控制進入和離開時的淡入淡出效果。
  • 樣式中的 .fade-enter-active 和 .fade-leave-active 控制整體的淡入淡出過渡效果。
    

GPU 加速屬性

當我們在網頁中使用 transform 和 opacity 等屬性來創建動畫時，這些屬性不會改變元素的佈局，而是讓瀏覽器將運算直接交給 GPU 來處理。

這樣可以避免觸發瀏覽器的重排（reflow），並通過合成（compositing）來減少重繪（repaint），使動畫變得更加流暢不卡頓。

• transform：例如，當你對元素進行旋轉、縮放、或平移操作時，使用 transform 是最佳選擇。這些變化只涉及元素的外觀，GPU 可以輕鬆處理。
• opacity：透明度的變化也不會影響佈局，只影響畫面上的像素顯示，因此 GPU 可以快速運算，使動畫更加順滑。

瀏覽器如何利用 CPU 和 GPU 來優化動效？

在網頁動畫中，CPU 和 GPU 各自有不同的角色。當我們了解它們如何分工，就可以有策略地使用它們來提升效能。

• CPU：負責處理邏輯計算、HTML 解析、網頁排版等任務，當你編寫 JavaScript 時，這些代碼主要是由 CPU 執行的。
• GPU：擅長處理大量圖形運算，特別是動畫渲染和圖像處理。GPU 能夠同時處理大量的像素運算，這使它非常適合用來渲染動畫。

優化動效的實用技巧

1. 避免重複觸發動畫：重複觸發動畫會消耗效能。使用 Vue.js 的 v-if 或 v-show 來減少不必要的 DOM 更新，保持動畫簡潔。

2. 控制動畫時間：動畫過長會影響使用者體驗，適當縮短動畫時間可以提升頁面流暢度，讓動畫更自然。

3. 使用 GPU 加速屬性：像 left 和 top 這些會引發重排的屬性應避免使用，應優先選擇 transform 和 opacity，以提升效能。

其他加速屬性

選擇適合的工具：不要執著於某個框架

每個專案的需求不同，選擇適合的工具至關重要。你不需要執著於某一種工具或框架——對於簡單的動畫，可以用輕巧的 UnoCSS；而複雜的動畫則可以選擇功能更強大的 GSAP 等庫來實現。

控制複雜度與效能

在大型專案中，我們需要控制動畫的複雜度，同時保持程式碼的可維護性。
要設計出流暢的過渡效果，效能優化和設計美學需要保持平衡。這裡有幾個小提示：

• 選擇合適的過渡效果：根據應用場景選擇正確的動畫效果，避免過度使用動效，影響使用者體驗。
• 效能優化技巧：盡量使用 transform 和 opacity 這類 GPU 加速屬性，提升頁面性能。
• 跨設備測試：根據設備的性能調整過渡效果，確保無論在桌面還是行動裝置上，都能獲得一致且順暢的使用體驗。

結語

我們每天都和瀏覽器打交道，寫文到這裡，小夥伴們會不會有點想打瞌睡呢？快「動」起來吧，做完真的很有成就感呢٩(●˙▿˙●)۶…⋆ฺ