前端設計

animation-vocabulary

把使用者描述的視覺動態反查成精確動畫術語,遇到相近概念時列出最佳答案與替代項並解釋差異,不自行發明名詞。

查看來源 ↗
作者/來源emilkowalski★ 37,788 GitHub Stars
測試版本d23d7f88a2e2更新日期:2026-08-21T09:32:32Z
支援平台OpenAI · Claude本次實測平台
安裝方式npx skills add emilkowalski/skills --skill animation-vocabulary
公平比較方式

三個問題,分別測載入前與載入後。

每次回答都在全新環境中產生。兩邊使用相同模型與設定,唯一差別是右側載入了這個 Skill。

模型版本gpt-5.6-sol帳號方案ChatGPT Plus思考強度medium執行工具codex-cli-native-skill
真實測試使用本機已登入的 ChatGPT Plus 實際執行,完成於 2026年9月7日。所有檢查通過後才公開,回答未經人工改寫。
三階段測試3 個問題全部完成版本核對3/3 通過環境清理9/9 通過測試隔離每回合全新環境
01
基礎題

辨識橡皮筋效果

測試問題

手機列表拉過頂端時會越拉越有阻力,放手後彈回界線。這種動畫叫什麼?請先給最精確術語,再用一句話說明。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill54 tokens · 7389 ms
**橡皮筋過度捲動(rubber-band overscroll)**:列表越過捲動邊界時阻力會逐漸增大,放手後再回彈至邊界。
已載入 Skill +307 tokens · 16520 ms
**Rubber-banding(橡皮筋回彈)** — 拖曳超出邊界時產生阻力,放手後回彈至界線(如 iOS 的過度捲動效果)。
02
實務題

區分形變與共享元素

測試問題

相簿中的小照片被點擊後,一邊移動、一邊放大成詳情頁同一張大圖;它不是單純兩張圖片淡入淡出。最適合的動畫術語是什麼?若有相近術語,請簡短比較。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill289 tokens · 11458 ms
最適合的術語是 **Shared Element Transition(共享元素轉場)**,也常稱 **Shared Element Animation**。 它表示同一個視覺元素(相簿縮圖)在兩個頁面/狀態之間連續地改變位置與尺寸,讓人感覺它直接移動、放大成詳情頁的大圖,而非兩張圖片交叉淡入淡出。 相近術語簡短比較: - **Hero Transition / Hero Animation**:本質上通常也是共享元素轉場;常指被突出呈現的主角元素,Flutter 尤其常用 `Hero` 這個名稱。 - **Matched Geometry Effect**:SwiftUI 的對應技術名稱(`matchedGeometryEffect`),用幾何匹配實現類似效果。 - **Container Transform**:Material Design 的轉場模式;通常是整個卡片/容器展開成新頁面,不只圖片本身。 - **Zoom Transition**:描述「縮放」的通俗說法,但未必包含跨頁共享元素與位置連續性,因此不如 Shared Element Transition 精確。 - **Crossfade / Dissolve**:兩個畫面淡出、淡入;不符合題述的同一元素移動並放大。
已載入 Skill +430 tokens · 18172 ms
**Shared element transition(共享元素轉場)** — An element travels and transforms from one position into another, like a thumbnail expanding into a card. 相近術語: - **Continuity transition**:強調以視覺連續性維持使用者的方位感,是較廣泛的設計概念。 - **View transition**:強調瀏覽器在頁面或狀態間建立轉場;共享元素轉場可以是其中的具體效果。 - **Crossfade**:一張淡出、另一張淡入,沒有同一元素移動與放大的連續感,因此不符合此例。
03
壓力題

處理複合動畫描述

測試問題

十二個縮圖不是同時出現,而是依序間隔幾十毫秒,從略小與透明變成正常大小;整體像一道波掃過。請給最精確的主要術語,並用詞彙表中的其他術語描述這個複合效果。

載入前 · 0 個 Skill載入後 · 版本已核對再次確認 · 0 個 Skill已確認模型套用 Skill三個環境皆已清理
未載入 Skill184 tokens · 9242 ms
主要術語:**交錯動畫(stagger)**。 複合效果:十二個縮圖依序套用數十毫秒的**交錯延遲(staggered delay)**,各自同時進行**縮放進場(scale-in)**與**淡入(fade-in)**,形成波浪般掃過的**級聯進場(cascading entrance)**。
已載入 Skill +398 tokens · 16316 ms
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade. 複合效果可描述為:**a stagger of Scale in + Fade in entrances**,並以數十毫秒的 **Delay** 進行 **Orchestration**。 - **Scale in** — Element grows from smaller to full size as it appears, often paired with a fade. - **Fade in** — Element appears by changing opacity. - **Orchestration** — Deliberately timing multiple animations so they feel like one coordinated motion.
測試紀錄

這次測試記錄了什麼?

固定不變兩邊使用相同的模型版本、帳號方案、系統指令、思考強度與測試問題。

分開測試每次回答都使用全新環境。載入前不含任何 Skill,載入後只含本頁指定的 Skill。

完整才公開三題的所有步驟與環境清理都成功後,才顯示結果。若無法確認模型是否套用 Skill,也會清楚標示。