nusakutnjak/motion-feels

動畫感覺（Motion Feels）

大多數人無法說出緩動曲線的名稱，但他們清楚地知道某個東西應該有什麼感覺：平靜、活潑、昂貴、俏皮。這些詞彙可能對應數十條曲線，所以 AI 只能猜測，然後工作就變成一輪又一輪的「太快了」、「彈性小一點」。此技能為你和對方提供一組共享的名稱，每個名稱都與精確的數值綁定。他們談論感覺；你處理數字。

這是為網站設計的：行銷、作品集、內容和購物網站。對於應用程式或產品 UI，相同的感覺也適用；請使用每個速度範圍中較快的端點。

三個部分：

• 感覺（Feel）：如何移動。 一個速度加上一條緩動曲線。14 種感覺如下。
• 效果（Effect）：移動什麼。 遮罩揭示、視差、跑馬燈等。請參閱 references/feels.md。
• 旋鈕（Dials）： 調整感覺：速度、停止、過衝、交錯、距離、延遲、觸發、強度。

談論感覺，而不是曲線

對方可能不瞭解任何動畫術語，也不應該需要瞭解。

• 永遠不要要求他們選擇 緩動、曲線、貝茲曲線或毫秒數。詢問感覺，用日常生活中的畫面來描述：「它應該要輕輕落地，像放下一個玻璃杯，還是稍微過衝然後穩定下來，像彈簧一樣？」
• 用他們「看起來」的樣子描述感覺，而不是如何製作：「開始很快，然後滑行到停止」，不是「power4.out」。
• 感覺名稱是選用的捷徑。 隨口提一個（「我會稱這種感覺為 奢華（Luxurious）」），這樣他們之後可以重複使用。永遠不要強求，也不要糾正他們的用詞。
• 數字放進程式碼，再加上一句簡短的說明給建置或審查的人：「給開發者：1.2 秒，cubic-bezier(0.22, 1, 0.36, 1)。」當沒有人會從中建置時，例如對方只在選擇方向時，就省略那行說明。
• 這個檔案裡的字是給你看的，不是給他們的。 旋鈕名稱和 CSS 術語不要出現在你的回覆中。說「結尾的小彈跳」（過衝）、「一個接一個」（交錯）、「它移動多遠」（距離）、「它多麼柔和地停止」（停止）、「一次移動多少」（強度）、「它從哪裡開始增長」（原點）、「給關閉動畫的人」（減少動畫）。
• 一行翻譯，然後開始建置。 不要說教，也不要耽誤工作。唯一的例外是下方表格中標示「詢問」的詞，這時需要先問一個簡單的問題。
• 觀看勝過描述。 當他們無法用言語表達時，提供示範頁面（assets/feels-demo.html，在任何瀏覽器中開啟）或建立一個快速的 A/B 切換讓他們選擇。

14 種感覺

感覺	看起來像	速度	CSS	GSAP
清脆（Crisp）	一個電燈開關：瞬間，乾淨的停止	150 毫秒	cubic-bezier(0.33, 1, 0.68, 1)	power2.out
快速（Snappy）	快速彈出並穩固落地	300 毫秒	cubic-bezier(0.16, 1, 0.3, 1)	expo.out
彈性（Springy）	快速，稍微過衝，然後穩定	600 毫秒	彈簧，反彈 0.3（CSS 中使用 linear()）	無彈簧；最接近的是 back.out(1.2)
平滑（Smooth）	一扇滑門：柔和開始，柔和停止	500 毫秒	cubic-bezier(0.65, 0, 0.35, 1)	power2.inOut
柔和（Gentle）	飄入並淡出至停止	700 毫秒	cubic-bezier(0.61, 1, 0.88, 1)	sine.out
奢華（Luxurious）	快速開始，長時間緩慢滑行至靜止	1.2 秒	cubic-bezier(0.22, 1, 0.36, 1)	power4.out
漂浮（Floaty）	一根羽毛：緩慢而均勻，沒有明確的開始或停止	2 秒	cubic-bezier(0.37, 0, 0.63, 1)	sine.inOut
戲劇化（Dramatic）	劇院幕簾：累積能量，衝刺，穩定下來	1.2 秒	cubic-bezier(0.87, 0, 0.13, 1)	expo.inOut
上弦（Wind-up）	彈弓：先向後拉，在終點過衝	800 毫秒	cubic-bezier(0.68, -0.6, 0.32, 1.6)	back.inOut(1.7)
彈出（Pop）	跳過終點然後回來一次	450 毫秒	cubic-bezier(0.34, 1.56, 0.64, 1)	back.out(1.7)
彈性（Elastic）	果凍：搖晃幾次，然後穩定	1 秒	linear() 來自 elastic.out	elastic.out(1, 0.3)
反彈（Bounce）	球落地	900 毫秒	linear() 來自 bounce.out	bounce.out
機械（Mechanical）	輸送帶：全程相同速度	1 秒	linear	none
階梯（Stepped）	翻頁書：逐幀跳躍	900 毫秒	steps(6)	steps(6)

一個感覺在任何速度下都保持其曲線形狀：「400 毫秒的 Springy」是更快的 Springy 形狀。在純 CSS 中，彈簧、彈性與反彈是從曲線中取樣的 linear() 列表；即用即貼的數值在 references/feels.md（「即用即貼程式碼」）中。Spring「彈性」數值是 SwiftUI 和 Motion 使用的 0–1 數值（阻尼比 = 1 − 彈性）。

如何運作

1. 首先檢查元素： 它被看見的頻率，以及它是介面的一部分還是展示性動畫（下方「選擇感覺之前」）。這可能意味著減少動畫，或不動畫。
2. 翻譯 他們的用語為感覺 + 旋鈕 + 效果，使用下方「日常用語」表格。如果兩三種感覺都符合，問一個簡單的問題（或顯示 A/B 切換）。
3. 在建置前用一句簡單的話說明計畫，例如：「標題行會在你滾動到它們時優雅地向上滑入並緩慢停止，只發生一次（感覺：奢華）。」他們可以在任何東西建置之前重新導向。
4. 建置 時將持續時間、延遲和緩動放在 CSS 變數或一個設定物件中（--motion-dur, --motion-ease, --motion-stagger），這樣每次調整都只是改變一個數字。遵循「建置規則」。
5. 回報 用簡單的詞語，同時附上給開發者的數值。對於變更，顯示變更前 → 變更後：「慢一點：1.2 秒 → 1.8 秒」。保留先前的數值，這樣「返回」就能精確還原。
6. 保持一致： 一旦網站的感覺確定後，建議將其儲存為專案設計代幣中的動態調色盤（如下），這樣每個區段移動方式都相同。

整個網站的動態調色盤

一個好的網站使用 2 或 3 種感覺，而不是 14 種：一種用於介面部分，一種用於展示時刻，可能還有一種強調色。當某人完全無法描述動畫時，請他們用三個詞描述品牌，然後一行話提出一個調色盤。

品牌感覺像	展示	介面	強調色
平靜、可信賴、關懷（健康、金融、法律）	柔和	清脆	—
高級、編輯風格（時尚、建築、飯店）	奢華	清脆	第一次載入時用戲劇化
大膽、快速、科技感（新創、SaaS、運動）	快速	清脆	彈出
友善、俏皮（兒童、食品、消費型應用程式）	彈性	快速	彈出或反彈
創意、表現力（工作室、作品集、代理商）	奢華或戲劇化	快速	上弦
夢幻、自然（健康、美容、冥想）	漂浮用於循環，柔和用於內容	清脆	—
復古、原始（遊戲、音樂、粗獷風格）	階梯	清脆	機械跑馬燈

選擇感覺之前

它被看見的頻率是多少？

令人愉悅一次的動畫，在第十次時就會成為干擾。讓動畫量與訪客遇到該元素的頻率相匹配。

頻率	範例	動畫
每頁、每次訪問	導航連結、頁首、按鈕、頁尾連結、表單欄位	小而快：清脆，或僅改變顏色。鍵盤焦點應立即顯示焦點環，無任何移動。這些元素的進入動畫（例如導航在載入時滑入）僅在第一次頁面檢視時播放。
每次點擊	頁面切換	短：600 毫秒或更少，即使品牌是緩慢且高級的
每次頁面	英雄區塊、區段揭示、案例研究卡片、統計數字計數	使用完整感覺。滾動揭示只播放一次，不會在你每次往回滾動時再次播放。
每次訪問	載入介紹、首次載入的英雄時刻	為戲劇化和愉悅感留出空間。載入器僅在第一次頁面檢視時執行。

調色盤的強調色放在結果上，而不是控制項上：加入購物車的按下動作保持快速（清脆），購物車計數才是彈出的東西。

當有人要求在每個頁面都出現的元素上使用緩慢的感覺時，建置快速版本並用一句話說明如何切換：「導航連結在每個頁面上都有，所以我讓它們保持快速；慢速版本只需改變一個數字。」不要等待回答；由他們決定。

介面部分還是展示動畫？

• 介面部分： 訪客正在嘗試做某事。導航下拉選單、行動選單、分頁、手風琴、模態視窗、工具提示、表單回饋、篩選器。將它們保持在 300 毫秒或更短，無論是哪種感覺；行動選單和模態視窗可以到 400 毫秒。退出速度約為進入速度的 75%：將較短的持續時間放在關閉狀態上。
• 展示動畫： 營造氣氛。英雄區塊、區段揭示、圖片揭示、跑馬燈、背景循環、首次載入時刻。感覺本身的速度適用，較長也沒問題。

依元素預設（當沒有感覺提供時）

這裡的速度會取代感覺本身的速度。任何回饋（「感覺廉價」、「太有彈性」）都會覆蓋這些預設值。

元素	感覺	速度
按鈕、連結、切換、懸停、工具提示	清脆	150 毫秒
導航下拉選單、分頁、卡片懸停	快速	250 毫秒
手風琴、常見問題	平滑	300 毫秒
行動選單、模態視窗、抽屜、面板	彈性	400 毫秒
拖放	彈性	600 毫秒
投影片、輪播、在螢幕上移動的東西	平滑	500 毫秒
文字和圖片揭示（淡入並向上 24 像素，交錯 60–80 毫秒）	調色盤的展示感覺；無提示時用快速	感覺自己的
頁面切換	平滑	600 毫秒
英雄時刻、首次載入	戲劇化	1.2 秒
背景循環、環境形狀	漂浮	2 秒
成功狀態、徽章	彈出	450 毫秒
載入器、跑馬燈、滾動驅動動畫	機械	視需要

日常用語

使用這些來翻譯。左欄是人們實際說的話；都不需要動畫知識。在較長的對話中，每個翻譯顯示一次，然後默默應用。

用語 → 感覺

他們說	解讀為	何時詢問
高級、昂貴、優雅、高檔、奢華、「像雜誌一樣」、「緩慢而自信」	奢華	—
平滑、流暢、如絲、無縫、絲滑、「滑行」	平滑（橫向移動）或 柔和（出現）	元素不明顯時：「均勻地從頭滑到尾，還是柔和地到達並淡出至停止？」
柔軟、平靜、放鬆、安靜、舒適、溫暖、「不花俏」	柔和	—
微妙、幾乎不存在、「不想讓人注意到」	清脆（介面）或 柔和（內容）	—
夢幻、輕盈、漂浮、無重、「像羽毛一樣」、「像在水下一樣」	漂浮	—
快速、迅速、反應靈敏、即時、點擊感強、緊湊、「像電燈開關」	清脆（小東西）或 快速（較大的東西）	大小不明確
活潑、有活力、大膽、自信、強烈、「落地有力」、「有態度」	快速	—
自然、物理感、有生命、「像手機應用程式」、「像真實物體」	彈性	—
有趣、俏皮、可愛、友善、調皮、快樂	彈出、彈性 或 彈性	幾乎總是：「稍微跳過終點，柔和的彈簧穩定，還是果凍般的搖晃？」
有彈性的	反彈（落地並反彈）或 彈出 / 彈性（過衝，穩定）	總是：「像球落地一樣反彈，還是稍微過衝然後穩定？」
果凍、搖晃、橡膠感、軟爛、抖動	彈性	—
電影感、史詩、「像電影一樣」、有力、沉重、「令人驚嘆的時刻」、大揭示	戲劇化	—
卡通感、「先上緊發條」、「像彈弓一樣」	上弦	—
機器人感、恆定、穩定、「像輸送帶」、股票行情	機械	—
復古、斷續、停格動畫、像素、故障感、「像舊電玩遊戲」、翻頁書	階梯	—
現代、酷、不錯、乾淨、「讓它突出」、「讓它好看」、「加一些動畫」、「讓它活起來」	本身沒有意義	總是：用簡單的話提供 3 種適合情境的感覺，或用三個詞詢問品牌（「讓它突出」可能指的是 Pop 感覺，或只是「更顯眼」）

回饋 → 旋鈕

他們說	改變
太快、匆忙、「一眨眼就錯過了」、「我看不到它」	速度 × 1.5
太慢、遲鈍、延遲、「花好久」、「我在等它」	速度 ÷ 1.5。如果是介面部分，也檢查 300 毫秒的限制。
突然、粗糙、不平順、「砰的一聲就位」、「停止得太突然」	停止：更柔和，沿 power2.out → power3.out → power4.out → expo.out 前進一步（CSS 數值在 references/feels.md）
軟爛、「結尾拖沓」、「爬行」、「花太久才穩定」	停止：更乾脆（更短的尾部），或更快
微弱、無生命、「需要更多活力」、「沒落地」	停止更乾脆 + 速度 ÷ 1.5，或改用快速
太有彈性、「太多了」、廉價、幼稚、「太過頭」	過衝降低一階：Pop cubic-bezier(0.34, 1.56, 0.64, 1) → 一點點 cubic-bezier(0.34, 1.4, 0.64, 1) → 無（快速）
感覺廉價	通常是移動太多：降低距離和降低過衝；如果很慢，速度 ÷ 1.5
跳躍、抖動、「不知從哪突然出現」	它是從無到有長大或過衝：從 scale(0.95) 開始（建置規則），過衝降低一階，距離降低
僵硬、機器人感、死氣沉沉、「需要更多生命力」	過衝提高一階，或改用彈性
平淡、無聊、「什麼都沒發生」、「我沒注意到」	提高交錯，或提高距離
忙碌、分心、「太多事情同時發生」、惱人	降低強度，降低交錯。惱人通常意味著它被看見的頻率太高：檢查「它被看見的頻率是多少？」
「讓我想吐」、「讓我覺得不舒服」	移除視差、大型縮放和長距離移動；檢查減少動畫的備援方案
開始得太晚 / 太早	以 100 毫秒為單位降低 / 提高延遲
感覺不對、「不太對勁」、「我不知道哪裡有問題」	不要猜：問「是速度、開始的方式、停止的方式，還是結尾的小彈跳？」，或並排顯示兩個版本

建置規則

• 用 transform 移動，用 opacity 淡入淡出。 不要動畫 width、height、top、left 或 margin；它們在滾動時會顫抖。對於手風琴，grid-template-rows: 0fr → 1fr 是公認的例外（內容放在內層包裝器中，有 min-height: 0; overflow: hidden）。永遠不要使用 transition: all；要指定屬性名稱。
• 永遠不要從無到有長大。 縮放進入動畫從 scale(0.95) 搭配 opacity: 0 開始（較大的彈出效果用 0.9），永遠不要用 scale(0)。

[FR 部分因原文截斷而未完成，暫依原文保留此狀態。]