✨ 華麗煙火背景+動態台灣國旗+繽紛文字，視覺衝擊直達心靈！🇹🇼

在這充滿煙火和歡呼聲的雙十國慶日，我們用 Vue.js 和創意設計，打造出一個專屬於中華民國的國慶特輯！
這次的互動特輯中，我們不僅加入了炫目的煙火效果，還搭配了實時播放的背景音效，讓整體感受更加真實。
當夜空中綻放出絢麗的煙火，耳邊響起隆隆的煙火聲，瞬間把人帶入了國慶狂歡的熱烈氛圍中！🎆

✨ 華麗煙火特效 + 煙火音效，動靜結合的視覺聽覺盛宴！

• 國慶雙十特輯網頁，來體驗一下吧
• Demo
• 📢點擊背景音效：記得點擊彩色文字下方的小喇叭，允許播放喔

設計核心概念

這次我們使用了 Vue.js 的動態元件，結合音效和視覺效果，創造出沉浸感十足的雙十國慶網頁體驗：

1. 煙火背景動畫：

   • 透過 FireworksBackground 元件，我們模擬出夜空中煙火綻放的場景。每顆煙火都隨機出現並逐漸散開，搭配色彩變化和粒子效果，營造出逼真的煙火場面。
   • 煙火的特效使用 Canvas 和 TypeScript 實現，讓煙火爆炸時的顆粒運動更加流暢。
   • 當使用者打開網頁時，這些煙火會在背景自動綻放，與節日的喜悅感完美契合。

2. 動態背景音效：

   • 在這次的特輯中，我們加入了一段 0.24 秒 的煙火音效，讓每一次煙火綻放時，都能聽到真實的音效。
   • 音效被設置為自動播放並且循環重複，讓背景音樂與煙火動畫達到完美同步這樣，使用者不僅能看到煙火的綻放，還能同時聽到逼真的音效，使人彷彿身處現場。
   • 我們特別設計了一個播放/停止音效的按鈕，使用者可以隨時開啟或關閉背景音效，自由控制自己的視聽體驗。

3. 搭配動態台灣國旗與繽紛文字：

   • Flag 元件展示了一面隨著網頁滾動微妙旋轉的台灣國旗，象徵著雙十國慶的精神。
   • ColorfulText 元件則顯示節日祝福語，如「✨2024 Taiwan✨」與「✨中華民國雙十國慶快樂✨」，讓祝福語在頁面上閃爍跳動，增加視覺吸引力。
   • 動態國旗、祝福文字與煙火動畫相輔相成，打造出一個充滿節日氛圍的互動式網頁。

炫彩文字看這篇👇
Day14 Vue.js 動效分類實戰 (6) 視覺炫彩特輯 - 元件化你的動態炫彩文字與按鈕

台灣國旗元件看這篇👇

Day24 Vue.js 動效分類實戰 (15) SVG特輯 - 實現旋轉華麗的台灣國旗動效，簡單又帥氣

技術細節：讓 Vue.js 帶來聲音與視覺的雙重享受

這次的實作運用了 先前學到的Vue.js 的元件化設計，讓各個部分的視覺效果可以獨立開發、維護與調整。以下是每個元件的技術實作重點：

1. 煙火背景 (FireworksBackground.vue)

• 實現原理：使用 Canvas API 和 TypeScript 來控制煙火粒子的生成、運動軌跡和爆炸效果。每次粒子生成後，隨著時間逐漸消失，達到逼真的煙火散開效果。
• 動畫控制：透過 requestAnimationFrame 實現動畫的平滑過渡，並根據時間間隔控制煙火的生成頻率，營造出隨機的煙火效果。
• 顏色與大小：設定煙火粒子的顏色、大小、速度等參數，使每次爆炸的效果有所不同，讓畫面更加多樣化。

2. 動態國旗 (Flag.vue)

• 實現原理：使用 CSS 的 transform 屬性來控制國旗的旋轉與位移，搭配 Vue 的 @mousemove 事件來捕捉使用者的滑鼠動作，進一步改變旋轉角度。
• 動態效果：國旗的動態效果通過 rotate 和 translate 的組合，使其在滑鼠移動時產生微妙的旋轉變化，增加與使用者的互動性。
• CSS 動畫優化：利用 CSS will-change 優化渲染，讓動畫在高頻率變化時依然流暢。

3. 繽紛文字 (ColorfulText.vue)

• 實現原理：利用 Vue 的 props 傳遞文字內容和字體大小，讓元件在不同的情境下可以靈活調整顯示。
• 動態樣式：透過動態 class 設定字體顏色和背景色的變化，使用 CSS animation 讓文字顏色隨著時間變化，產生閃爍效果。
• 文字樣式調整：在文字顯示的同時，使用 CSS text-shadow 增加立體感，讓文字在頁面上更具視覺衝擊力。

4. 布局與層次控制

• 佈局方式：整個頁面採用 relative 和 absolute 的組合，確保各個元件可以自由定位，達到最佳的視覺效果。
• 層次管理：使用 z-index 控制背景煙火和前景文字的層次關係，讓煙火效果不會遮擋文字和國旗，確保畫面的層次分明。

5. 煙火音效的播放

• 實現原理：透過 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>

煙火音效的配置使用

1. 音效檔案的安放位置

• 音效檔案放置位置：
  假設你的 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> 標籤會自動載入音效。

2. 自動播放音效的實作細節

• 音效元素的引用：
  使用 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;
    });
  });
  

  這段程式碼的主要步驟如下：

  1. 取得音效元素引用：

     • 使用 document.querySelector('audio') 來選擇 DOM 中的 <audio> 元素，並將它賦值給 audio.value。這樣，audio.value 就是一個指向 <audio> 元素的引用。

  2. 嘗試播放音效：

     • 呼叫 audio.value?.play() 方法來嘗試播放音效。這個方法會返回一個 Promise，如果音效成功播放，Promise 會成功解析。
     • 在 .then() 中，設定 isPlaying.value = true，表示音效已經成功播放並處於播放狀態。

  3. 處理播放失敗的情況：

     • 如果音效播放被瀏覽器阻止（通常是因為自動播放限制），play() 方法的 Promise 會被拒絕（rejected），進而執行 .catch() 中的邏輯。
     • 在 .catch() 中，我們將 isPlaying.value 設為 false，表示音效未播放。這時，可以顯示一個播放按鈕，讓使用者手動播放音效。

3. 處理瀏覽器的自動播放限制

• 現代瀏覽器（如 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，讓音效播放更靈活、控制更精細。

• 開放音效來源：這裡好多有趣的音效
• Freesound - Fireworks15.wav by kingsrow

結尾語

為什麼這樣的設計值得你一試？

這次的國慶特輯，將 Vue.js 的動態效果與音效功能結合，讓使用者在瀏覽網頁的同時，感受到節日的歡樂與熱鬧。無論是視覺上的煙火盛宴，還是聽覺上的煙火聲響，都讓這個國慶特輯更具臨場感。
如果你也想在網頁上創造出充滿節日氣氛的效果，這樣的設計是非常值得參考的。

透過簡單的元件化設計和 Vue.js 的強大功能，就能為使用者帶來無比震撼的雙十國慶體驗！

還在等什麼？一起用 Vue.js 為你的網頁注入國慶的熱情吧！ 🎆🇹🇼🎶
雙十國慶快樂！🇹🇼💙