小編精選 - 技術文章翻譯 · 07月09日

✨酷炫特效、TTS 與有趣動畫（AI Avatar v15：VS Code 與 Chrome 擴充功能）

簡介

AI Avatar 是一款完全免費的應用程式，可讓你的 VRoid（VRM）3D 頭像根據 AI 聊天內容，以及在 VS Code 和 Chrome（Edge）中的 Enter 鍵操作做出動畫反應。AI Avatar 的使命是為開發者與每一個人加油打氣，讓大家感到開心。自上一版以來，AI Avatar 有 4 項重大更新。

由我的朋友 RutenVeil 製作的超酷特效
TTS（文字轉語音）
有趣的 3D 動畫
其他更新

我最想強調的是與我的朋友 RutenVeil 的合作。RutenVeil 為 AI Avatar 創作了超酷的背景特效與載入特效，讓 AI Avatar 比以往更有魅力。另外，上次我終於加入了基於 API 的 AI 和本地 LLM。這次，我又加入了另一項 AI 超能力：TTS（文字轉語音）。現在 AI Avatar 可以說話了，這個功能會讓 AI Avatar 更靠近你。此外，我還加入了有趣的 3D 動畫：黃金噴泉與雲霄飛車，來娛樂你。另外，我也加入了情境式訊息，所以訊息會依照日期、時間與情境而不同。讓我們來看看新功能吧！

1. 由 RutenVail 製作的酷炫特效

https://www.youtube.com/watch?v=oe025rprCqM

嗨，我是 @rutenveil。我參與了 AI Avatar 應用程式 v15 更新中的視覺特效部分。這是合作文章的一部分，而我不是這個應用程式的主要作者。這次更新中，我製作了一組基於 CSS 動畫的視覺特效，讓應用程式看起來更有動態感，也更具表現力。

特效主題

v15 更新包含六種不同的視覺主題：

偶像舞台
科幻
魔法
賽博
銀河
美式漫畫風格

每個主題都探索不同的視覺世界。本文中，我會聚焦在「偶像舞台」特效，它的設計建立在非常精準的時間軸上（精細到 0.1 秒單位）。我也會分享一些實作細節，以及開發過程中遇到的挑戰。

1-1. 空間設計：以類似 Photoshop 的圖層結構營造深度

在這個實作中，畫面是由多個分層的 div 組成，並分成 上層、中層、頭像層、下層 等圖層。這樣就形成了類似 Photoshop 圖層的結構。透過在深度方向堆疊圖層，即使所有素材都只是簡單的平面插圖或向量形狀，也能做出強烈的視覺透視感與深度感。結果會呈現出一種能與 3D 頭像相抗衡的 3D 空間感。這種結構的另一個好處是可維護性。因為每個圖層都分開了，之後要控制與調整也更容易。

1-2. 控制：解決動畫衝突與優先順序問題

開發過程中，我遇到一些問題：由於宣告順序與樣式覆寫造成的 CSS 衝突，導致動畫沒有如預期運作。經過研究後，我發現 CSS 有嚴格規則：@keyframes 裡的 transform 會優先於靜態類別所設定的 transform。為了解決這個問題，我將下列內容完全分離：

靜態樣式（初始定位）
動態樣式（動畫）

並把各自的責任拆分到獨立的類別中。這個設計消除了動畫優先順序的衝突，讓所有特效都能完美同步運作，系統也變得更穩定、更可預測。

1-3. 基於時間軸的多動畫系統（偶像舞台範例）

在「偶像舞台」特效中，每個光源或發光元素都透過單一元素上的多個動畫來控制。每個元素會遵循三階段時間軸：

出現（FadeIn）
循環動作（Waving / Swing）
消失（FadeOut）

這些動畫會透過 CSS 中以逗號分隔的方式組合。
範例：

.psy-purple {
   transform: translateX(0%) rotate(8deg) translateY(33%);
   animation:
       psyFadeIn 0.4s ease-out forwards 1s,
       psyWavingPurple 0.13s ease-in-out infinite alternate 1.4s,
       fadeOutLight 0.2s ease forwards 11.4s;
}

這種做法能在單一元素內精準控制多種視覺狀態，讓純 CSS 也能實現像編舞一樣複雜的動作。

2. 文字轉語音

https://www.youtube.com/watch?v=vQ9sC10_HNc

我加入了多種 TTS（文字轉語音）選項：Gemini TTS、Web Speech API、Kokoro 與 VOICEVOX。Gemini TTS 品質高、速度也快，但在免費方案下，我一天只能使用 10 次。對於每天都會大量說話的 AI Avatar 來說，這實在太少了。Web Speech API 免費、快速且不限次數，但聽起來像沒有情感的機器人。所以我也加入了本地 TTS 模型，英文用 Kokoro，日文用 VOICEVOX。它們的自然度算是相當不錯。不過，Kokoro 在本機執行時稍微重一些。至於 VOICEVOX，使用者必須事先自行安裝，會多一點準備成本。所以，如果你很有錢（不像我），就付費使用 Gemini TTS，享受它快速又高品質的語音吧。

TTS（文字轉語音）	優點	缺點
Gemini TTS	品質高、速度快	每天免費 10 次，需付費使用
Web Speech API	快速且免費	聲音機械感重
本地 TTS 模型	自然度相當不錯	比其他方案更重，需要額外設定

3. 有趣的 3D 動畫

3.1 百萬富翁模式

https://www.youtube.com/watch?v=ACcrC_mWx_U

由於 AI Avatar 使用 VRM 3D 頭像，我也沒有忘記加入有趣的 Three.js 3D 動畫更新。我加入了百萬富翁模式。這個模式會像噴泉一樣噴出金幣。它是我之前某個舊專案的重製版，而那個專案曾經是我最成功的作品之一。很高興我能重用舊專案，節省開發時間。你可以在金幣噴泉與粉紅鑽石噴泉之間選擇。如果你想感覺更富有，或者只是喜歡粉紅色，那就選粉紅鑽石噴泉吧。當然，大家都喜歡錢，對吧？這個模式很推薦給像我一樣，熱愛錢卻又不夠有錢的開發者。讓這個功能保持高效能的關鍵在於，它不會替每一枚硬幣都計算碰撞，因此動畫輕量許多。

3.2 雲霄飛車模式

https://www.youtube.com/watch?v=iyecc2jEQcY

我也加入了雲霄飛車模式。這同樣是我之前另一個超熱門專案的重製版。雲霄飛車很有趣，但我們只能享受短短一段時間。透過這個模式，你可以盡情享受雲霄飛車。我加入了三種版本：預設、彩虹與水。頭像會像滑板一樣踩在板子上沿著軌道滑行，平衡感極佳，絕對不會從那塊小板子上掉下來。這個模式是使用 Three.js 的 RollerCoaster.js 製作的。

4. 其他更新

4.1 情境式訊息

AI Avatar 原本有固定的打氣訊息。雖然你可以新增與編輯它們，但固定訊息會讓頭像顯得很機械。所以我加入了情境式訊息功能。現在 AI Avatar 會檢查日期、時段與時間，並據此改變訊息。以下是我設定的情境。AI Avatar 會回應優先順序最高的訊息。

優先順序	條件	範例訊息
1	特殊日子（節日）	「萬聖節快樂！🎃」
2	會話次數里程碑	「今天第 10 次回應了！🎉」
3	距離上次回應已過很久	「歡迎回來！好想你 💕」
4	長時間會話	「你已經持續一個小時了！🔥」
5	星期幾	「星期一快樂！衝啊！⚡」
6	一天中的時間	「早安！☀️」
7	AI / 固定訊息池	一般回應訊息

4.2 待機動畫

我新增了更多預設動畫。原本只有眨眼，所以我又加入了頭部、胸部與身體的隨機小幅傾斜。頭部和胸部傾斜很簡單，因為只要加上傾斜效果就好。不過，當整個身體傾斜時，另一側的腿會浮起來，看起來很怪，所以我需要調整腿部，讓它維持在地面上。

4.3 變更 AI 角色

雖然使用者可以透過提示詞來更改頭像角色，但為了更方便使用，我還加入了幾個預設角色：可愛、活潑、酷炫。現在使用者可以快速切換角色，配合自己的心情。

如何使用 AI Avatar 的 VS Code 擴充功能版本（感謝 200+ 次安裝！）

你可以透過兩種方式下載 AI Avatar 的 VS Code 擴充功能。

選項 1：從 VS Code 安裝：左側側邊欄的 Extensions 按鈕 > 搜尋 AI Avatar > Install ↓↓
選項 2：從 VS Code Marketplace 安裝：https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar ↓↓

如何使用 AI Avatar 的 Chrome 版本

從 Chrome Web Store 安裝：↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

特別感謝

我的朋友兼 CDO（首席設計長）🤣，@rutenveil 幫忙製作了這些酷炫特效。非常感謝！
我的 DEV Community 朋友兼 CTO（首席技術長）🤣，@gramli 幫忙在版本 2 更新 AI Avatar，並持續支持我。非常感謝！
我的 DEV Community 朋友兼 CMO（首席行銷長）🤣，@itsugo。我們的頭像合作專案是 AI Avatar 的起點，並持續支持我。非常感謝！
我的同事 Maximum Blue 幫忙在第 6 版製作獨特的頭像，並持續支持我。非常感謝！