遊戲相關動畫盤點

• 遊戲進入頁背景動畫 (CSS 動畫)
• 遊戲教學提示動畫 (CSS 動畫)
• 時間軸拉伸 (CSS 動畫 + JS 操作)
• 卡片排序 (CSS 動畫 + JS操作)

遊戲教學提示動畫 (CSS 動畫)

tailwind.config.js 設定客製化 animation keyframes 動畫

keyframes: {
    wiggle: {
        '10%': { transform: 'scale(1)' }, 
        '20%': { transform: 'scale(0.9)' }, 
        '80%': { transform: 'scale(0.9) translateY(15px)' }, 
    },
    wiggleCard: {
        '0%': { transform: 'translate(-50%,5px)' },
        '20%': { transform: 'translate(-50%,5px)' },
        '80%': { transform: 'translate(-50%,15px)' },
    },
},

說明

除了 isShowTip 是一個 JS 變數去設定開關提示說明
使用 wiggle class 取模擬手勢往下按，深度離視線變遠，所以變小，然後往下移進行拖曳的感覺。
wiggleCard class 則是提示卡片配合動畫往下移動的動作。

<div
            v-if="isShowTip"
            class="absolute bottom-10 left-10 translate-x-1/2 translate-y-10"
          >
            <i-carbon-touch-1-filled class="animate-[wiggle_5s_infinite_forwards] text-4xl text-yellow-400" />
            <div class="absolute w-60 -bottom-10 -left-20 -rotate-3 font-bold">
              將線索拖曳到時間軌跡上！
            </div>
          </div>

<div
            v-for="(clue, index) in clues"
            v-show="clue.step === gameStatus.currentStep"
            ref="clueCardEl"
            :key="clue"
            :data-test="clue.step === gameStatus.currentStep ? 'clue-card' : 'clue-card-hidden'"
            class="cursor-grabbing absolute top-0 left-1/2 -translate-x-1/2 flex items-center w-[360px] px-2 py-3 border rounded-lg mx-auto bg-white shadow-bottom"
            :class="isShowTip ? 'animate-[wiggleCard_5s_infinite_forwards]' : ''"
            @mousedown.stop="handleClueCardMouseDown(index, $event)"
            @mouseup.stop="handleClueCardMouseOff(index, $event)"
            @touchstart.stop="handleClueCardTouch(index, $event)"
            @touchend.stop="handleClueCardTouchOff(index, $event)"
            @dragstart="() => false"
          >
            <img
              class="w-[100px] h-[100px] mr-2 shrink-0 object-contain bg-white"
              :src="clue.image"
              alt=""
            >
            <p class="text-sm font-bold">
              {{ clue.description }}
            </p>
            <div class="absolute right-2 bottom-2 font-Libre text-[#b1aea4] text-sm">
              {{ clue.point }} 分
            </div>
          </div>

而其他的動畫我們會在「過場動畫實踐」 後面 JS 處理動畫的文章裡說明。

(預覽畫面)

補充 CSS 或 JS 動畫製作原理

CSS 動畫原理

1. 轉換（Transform）: 這允許你旋轉、縮放、傾斜或平移元素。
2. 過渡（Transition）: 這是一個時間效果，用於在不同狀態間平滑地改變CSS屬性。
3. 關鍵幀（Keyframes）: 這允許你創建複雜的動畫序列，而時間切割是以百分比為主，你可以先定義總執行的時間，並在不同百分比的時間點定義元素的屬性。

CSS動畫通常用於較簡單、不需要用戶互動的動畫效果。這次的滑動提示動畫就是以 animation keyframe 完成 。

JavaScript動畫原理

1. DOM操作: JavaScript允許你直接操作DOM（文檔對象模型），這意味著你可以實時改變元素的屬性和樣式。
2. 請求動畫幀（[requestAnimationFrame]https://developer.mozilla.org/zh-TW/docs/Web/API/window/requestAnimationFrame)）: 這是一個內建的API，用於創建平滑的動畫。它允許你告訴瀏覽器你希望執行的動畫，並讓瀏覽器在下一次重繪之前調用特定的函數來更新動畫。直觀的做法可以想像是 setinterval 不斷去更新靜態畫面連結起來的動畫效果，但 requestAnimationFrame 修正了 setinterval 會延遲的問題，更為推薦使用在快速疊代跟互動的動畫，例如 scrolling。
3. 事件驅動: JavaScript 允許你使用事件（如點擊、滑動等）來觸發動畫，這使得動畫可以更加互動。

JavaScript動畫通常用於更複雜和需要與使用者互動。

兩種動畫製作選擇與相關資源整理

JavaScript 動畫庫

1. GSAP: 這是一個運作在純JavaScript上的強大動畫庫，支持HTML5規範並與所有現代瀏覽器兼容。了解更多
2. Anime.js: 這個庫非常適合用於設計UI/UX動畫，例如logo、按鈕等。了解更多
3. Mo.js: 這是另一個詳細的JavaScript動畫資源庫，專為UI、UX動畫而設計。了解更多
4. Animate Plus: 這是一個超級輕量、簡單的動畫庫，專為JavaScript動畫設計。了解更多
5. Bounce.js: 這個平台不僅是一個資源庫，還附帶有一個網頁建構器，讓你可以在瀏覽器中設計動畫。了解更多

CSS 動畫庫

1. Wicked CSS: 這個庫提供了一些不可思議的CSS3效果，例如物體旋轉、翻轉等。了解更多
2. Animate.css: 這是一個開放源始碼的CSS3動畫庫，非常成熟和完整。了解更多
3. Tuesday: 這個庫專注於簡單和微妙的動畫效果。了解更多
4. CSShake: 這個庫提供了各種類型的搖晃效果，都在純CSS上運作。了解更多
5. Magic: 這個庫提供了基於CSS3的多種動畫效果。了解更多

參考：10個最棒的免費網頁動畫資源

兩種動畫製作比較

• 性能: CSS動畫通常比JavaScript動畫更高效，因為它們是由瀏覽器的圖形硬體加速處理的。
• 控制: JavaScript提供更細緻的控制，包括動畫的暫停、取消、反轉等。
• 複雜性: 對於複雜的動畫，JavaScript通常是更好的選擇，因為它提供了更多的自由度和選項。

最後補充 Vue.js 動畫製作說明

由於我們採用 Vue.js 作為 JavaScript 框架，因此在動畫製作過程中，我們利用 Vue.js 提供的動態樣式綁定（style binding）來實現各種動畫流程所需的狀態切換。同時，我們也結合了 CSS 的 Transform 和 Transition 特性來進行動畫的「播放」。

另外 Vue.js 也提供 元素，可以用它來包裹想要添加過渡效果的元素。而此次專案並未使用到。