在這充滿煙火和歡呼聲的雙十國慶日，我們用 Vue.js 和創意設計，打造出一個專屬於中華民國的國慶特輯！
這次的互動特輯中，我們不僅加入了炫目的煙火效果，還搭配了實時播放的背景音效，讓整體感受更加真實。
當夜空中綻放出絢麗的煙火，耳邊響起隆隆的煙火聲，瞬間把人帶入了國慶狂歡的熱烈氛圍中！🎆
設計核心概念
這次我們使用了 Vue.js 的動態元件，結合音效和視覺效果，創造出沉浸感十足的雙十國慶網頁體驗：
煙火背景動畫：
FireworksBackground 元件，我們模擬出夜空中煙火綻放的場景。每顆煙火都隨機出現並逐漸散開，搭配色彩變化和粒子效果，營造出逼真的煙火場面。動態背景音效：
搭配動態台灣國旗與繽紛文字：
Flag 元件展示了一面隨著網頁滾動微妙旋轉的台灣國旗，象徵著雙十國慶的精神。ColorfulText 元件則顯示節日祝福語，如「✨2024 Taiwan✨」與「✨中華民國雙十國慶快樂✨」，讓祝福語在頁面上閃爍跳動，增加視覺吸引力。炫彩文字看這篇👇
Day14 Vue.js 動效分類實戰 (6) 視覺炫彩特輯 - 元件化你的動態炫彩文字與按鈕
台灣國旗元件看這篇👇
Day24 Vue.js 動效分類實戰 (15) SVG特輯 - 實現旋轉華麗的台灣國旗動效，簡單又帥氣
這次的實作運用了 先前學到的Vue.js 的元件化設計，讓各個部分的視覺效果可以獨立開發、維護與調整。以下是每個元件的技術實作重點：
FireworksBackground.vue)Flag.vue)transform 屬性來控制國旗的旋轉與位移，搭配 Vue 的 @mousemove 事件來捕捉使用者的滑鼠動作，進一步改變旋轉角度。rotate 和 translate 的組合，使其在滑鼠移動時產生微妙的旋轉變化，增加與使用者的互動性。will-change 優化渲染，讓動畫在高頻率變化時依然流暢。ColorfulText.vue)props 傳遞文字內容和字體大小，讓元件在不同的情境下可以靈活調整顯示。animation 讓文字顏色隨著時間變化，產生閃爍效果。text-shadow 增加立體感，讓文字在頁面上更具視覺衝擊力。relative 和 absolute 的組合，確保各個元件可以自由定位，達到最佳的視覺效果。z-index 控制背景煙火和前景文字的層次關係，讓煙火效果不會遮擋文字和國旗，確保畫面的層次分明。audio 元素和 TypeScript 的 Audio API，我們實現了音效的自動播放與手動切換功能。當使用者第一次打開頁面時，音效會自動播放，並且與煙火動畫同步，帶來動靜結合的沉浸式體驗。
以下是整體實作的 Vue 程式碼：
<script lang="ts" setup>
import FireworksBackground from "../components/BackgroundFire.vue";
import Flag from "../components/Flag.vue";
import ColorfulText from "../components/ColorfulText.vue";
import { ref, onMounted } from 'vue';
// 定義音效是否正在播放的狀態
const isPlaying = ref(true);
// 定義 audio 元素的引用
const audio = ref<HTMLAudioElement | null>(null);
// 定義播放音效的函數
const playSound = () => {
if (audio.value) {
audio.value
.play()
.then(() => {
isPlaying.value = true;
})
.catch((error) => {
console.error("播放失敗:", error);
});
}
};
// 在掛載時自動嘗試播放音效
onMounted(() => {
audio.value?.play().then(() => {
isPlaying.value = true;
}).catch(() => {
// 如果自動播放失敗（例如被瀏覽器阻止），顯示按鈕讓使用者點擊播放
isPlaying.value = false;
});
});
</script>
<template>
<div class="h-screen w-full relative font-sans tracking-[0.7rem]">
<!-- 背景層 -->
<FireworksBackground class="absolute inset-0 z--1" />
<Flag class="relative pb-58" />
<ColorfulText
text="✨2024 Taiwan✨"
fontSize="4rem"
class="absolute bottom-48 w-full text-center"
></ColorfulText>
<ColorfulText
text="✨中華民國雙十國慶快樂✨"
fontSize="3rem"
class="relative bottom-52 w-full text-center"
></ColorfulText>
<div
class="absolute bottom-8 text-sm text-gray-3 opacity-20 text-center w-full tracking-wide cursor-pointer"
>
<a href=""
>想知道更多中華民國雙十國慶快樂的網頁，怎麼做的嗎？
<br />
🎆 來看看 IT 鐵人賽系列文吧 👉創意前端設計：用 Vue.js 打造 30 個互動實用功能 🎆
</a>
<br />
<audio ref="audio" src="/sound/fireworks.wav" loop></audio>
<p v-if="!isPlaying" @click="playSound" class="text-white">📢點擊背景音效</p>
</div>
</div>
</template>
<style scoped></style>
音效檔案放置位置：
假設你的 Vue.js 專案路徑是 /Users/sunnycat/vue-animation-sunny-cat，並且音檔 fireworks.wav 放在 public/sound 資料夾中，目錄結構如下：
vue-animation-sunny-cat/
├── public/
│ └── sound/
│ └── fireworks.wav
├── src/
│ └── components/
│ └── YourComponent.vue
└── ...
fireworks.wav 音檔被放在 public/sound 資料夾中。public 資料夾中的檔案在編譯時會被原樣複製，並且可以通過根路徑 /sound/fireworks.wav 來直接訪問音效。引用方式：
在 Vue 元件中，你可以使用 <audio> 標籤來引用這個音檔，如下：
<template>
<audio ref="audio" src="/sound/fireworks.wav" loop></audio>
</template>
這段程式碼中，src 設定為 /sound/fireworks.wav，表示音效檔案的 URL 是基於網站根目錄的。這樣引用後，當網頁加載時，<audio> 標籤會自動載入音效。
音效元素的引用：
使用 Vue 的 ref 來引用 <audio> 元素，以便在 TypeScript 中控制音效播放。這裡的 audio 變數是用 ref<HTMLAudioElement | null> 定義的，這表示它是一個可選的 HTML 音效元素引用：
const audio = ref<HTMLAudioElement | null>(null);
ref 是 Vue 3 的 Composition API 中用於創建響應式變數的方法，這裡我們用它來存取 <audio> 標籤的引用，以便後續可以對音效進行控制。
在元件掛載時自動嘗試播放音效：
使用 Vue 3 的 onMounted 方法，在元件掛載完成時自動執行音效播放的邏輯。onMounted 是一個 Composition API 的生命週期鉤子，用於在 Vue 元件完成掛載後執行某些操作：
onMounted(() => {
// <audio> 元素
audio.value?.play().then(() => {
isPlaying.value = true; // 播放成功後，設定 isPlaying 為 true
}).catch(() => {
// 如果自動播放失敗（例如因瀏覽器限制），讓 isPlaying 保持 false
isPlaying.value = false;
});
});
這段程式碼的主要步驟如下：
取得音效元素引用：
document.querySelector('audio') 來選擇 DOM 中的 <audio> 元素，並將它賦值給 audio.value。這樣，audio.value 就是一個指向 <audio> 元素的引用。嘗試播放音效：
audio.value?.play() 方法來嘗試播放音效。這個方法會返回一個 Promise，如果音效成功播放，Promise 會成功解析。.then() 中，設定 isPlaying.value = true，表示音效已經成功播放並處於播放狀態。處理播放失敗的情況：
play() 方法的 Promise 會被拒絕（rejected），進而執行 .catch() 中的邏輯。.catch() 中，我們將 isPlaying.value 設為 false，表示音效未播放。這時，可以顯示一個播放按鈕，讓使用者手動播放音效。現代瀏覽器（如 Chrome、Safari）為了防止自動播放音效打擾使用者，通常會要求使用者進行某種互動（如點擊或觸摸）後才能播放音效。
在這種情況下，當 play() 方法被阻止時，我們可以通過 .catch() 來捕捉這個錯誤，並提供一個按鈕讓使用者手動播放音效。
範例：顯示播放按鈕：
<template>
<div>
<audio ref="audio" src="/sound/fireworks.wav" loop></audio>
<button v-if="!isPlaying" @click="playSound">點擊開始背景音樂</button>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const isPlaying = ref(false);
const audio = ref<HTMLAudioElement | null>(null);
const playSound = () => {
audio.value?.play().then(() => {
isPlaying.value = true;
}).catch((error) => {
console.error('播放失敗:', error);
});
};
onMounted(() => {
audio.value?.play().then(() => {
isPlaying.value = true;
}).catch(() => {
isPlaying.value = false;
});
});
</script>
在這個範例中，如果音效被阻止，isPlaying 會保持 false，並且顯示「點擊開始背景音樂」的按鈕，使用者可以點擊按鈕手動播放音效。
這段程式碼的設計讓音效在頁面加載時自動播放，如果因為瀏覽器的自動播放限制而無法自動播放，則向使用者提供手動播放的選項。
它利用了 Vue 3 的 ref 和 onMounted 來操作 <audio> 元素，並結合了 TypeScript 的 Audio API，讓音效播放更靈活、控制更精細。
為什麼這樣的設計值得你一試？
這次的國慶特輯，將 Vue.js 的動態效果與音效功能結合，讓使用者在瀏覽網頁的同時，感受到節日的歡樂與熱鬧。無論是視覺上的煙火盛宴，還是聽覺上的煙火聲響，都讓這個國慶特輯更具臨場感。
如果你也想在網頁上創造出充滿節日氣氛的效果，這樣的設計是非常值得參考的。
透過簡單的元件化設計和 Vue.js 的強大功能，就能為使用者帶來無比震撼的雙十國慶體驗！
還在等什麼？一起用 Vue.js 為你的網頁注入國慶的熱情吧！ 🎆🇹🇼🎶
雙十國慶快樂！🇹🇼💙
iThome鐵人賽
看影片追技術