上一篇《Framer 基礎互動效果：Hover、Press、Loop、Drag、Appear》裡，還有一個重點沒提到，就是每個 Effect 面板最下面都有 「Transition」。這篇就來講講這項設定如何影響動畫的質感，Transition 能控制動畫的：時間長度（Duration）、緩動曲線（Easing），或者用彈力（Spring） 模擬真實世界的物理效果，讓你做出跟別人網站不一樣的細節✨我們就一起來看看吧～
同樣是滑鼠靠近時卡片浮起來，有些網站看起來就是比較精緻。到底差在哪呢？其實有時候不是差在動得多或少，而是差在動態細節。卡片浮起時，是「啪！」一下就定位，還是輕輕反彈一下才停下來？這個細節就是在 「Transition」中調整的。
Effect 面板的前半部只設定「發生什麼事」（例如：變大 1.1 倍、透明度變 0），而最後一個 Transition 才能設定這個動畫的「感覺」，也是打造高質感 UI 的秘密武器。
認識不同的緩動曲線（Easing Curves）
打開 Transition 設定，不要被複雜的介面嚇到了！可以先點開「Ease」 ，這裡有幾個預設的曲線可以選擇，選了之後系統就會自動為你設定好貝茲曲線（Bezier）與對應數值，完全不需要自己手動拉曲線。而這些曲線的差別是什麼？該在什麼時候使用呢？
基礎速度曲線
Linear（線性）
動態特徵：以最大速度等速移動並瞬間停止，感覺較機械化、生硬。
適用場景：適合沒有起點終點的持續性動作，例如無限滾動的跑馬燈（Ticker）或旋轉動畫（Spinner），不適合用於卡片放大或彈窗出現等有明確停靠點的時候。
Ease In-Out（漸快漸慢 / 淡入淡出）
動態特徵：開頭緩慢加速、中間達到最高速、結尾再優雅地減速停靠。就像一顆球在地上滾動一樣受力加速後自然減速，非常符合物理直覺。
適用場景：適合完全在螢幕內進行位置轉移的物件（從 A 點移動到 B 點）。
Ease In（漸快 / 淡入）
動態特徵：開頭緩慢加速，但在速度達到最快時瞬間停止，就像踩油門到底突然撞牆。
適用場景：適合起點在螢幕內、終點在螢幕外的物件。因為物件是在離場看不到終點時突然停住，能給人一種順暢飛出螢幕的俐落感。
Ease Out（漸慢 / 淡出）
動態特徵：以最高速起步，隨後逐漸減速直到溫和地停下，給人一種沉穩停靠的接收感。
適用場景：適合從螢幕外飛入、並停在螢幕內的物件，例如從下方滑入的選單或從上方飄落的通知欄。
超越及蓄力曲線
想讓動畫更活潑、更具彈性，可以選擇 Back 系列的曲線：
Back In Out（雙向回彈）
動態特徵：啟動前會先往後縮（蓄力），抵達終點時會衝過頭一點點，再微幅縮回就位。
適用場景：適合畫面內路徑清晰的跨區移動，例如頁籤指示器滑動、輪播圖切換。
Back In（蓄力彈射）
動態特徵：起步前先往反方向「縮一下」再迅速衝出去。
適用場景：適合需要力量感的離場，例如彈窗關閉、刪除卡片丟進垃圾桶。
Back Out（衝出回彈）
動態特徵：直接快速衝向目標，衝過頭超越終點一點點後，再優雅地回彈歸位。
適用場景：適合強調視覺回饋與進場，例如打勾成功的 Icon 效果。
Ease 面板的其他欄位
選好曲線後，下面還有幾個欄位可以進一步控制動畫的節奏：
Bezier（貝茲座標與複製複用）
圖表下方的座標數值（例如 0.5, 0, 0.88, 0.77）就是曲線的控制點位置。如果你手動拉出了一個極具質感的微互動曲線，只要複製這串 Bezier 數字貼到其他元件，就能讓全站動畫節奏一致。
Time（時間長度）
代表這段動畫從開始到結束「總共要花幾秒」（例如 0.5s 或 1s）。時間越短，動作越俐落爽快；時間越長，動作越優雅緩慢。
Delay（延遲時間）
當觸發條件發生後，要「等待多久才開始執行」動畫（例如 0.3s）。可以呈現出多個物件交錯出現。
加入物理感！Spring（彈力動畫）怎麼調？
除了傳統的 Ease 曲線，Framer 也能模擬真實物理世界的 Spring（彈力）。如果你想要做出那種 Q 彈、帶有實體感與活潑質感的 UI，可以使用 Spring 設定看看！
在 Framer 中，Spring 提供了兩種完全不同的設定模式：
模式一：Time（時間控制模式）
運作邏輯是你直接設定「動畫要花多少時間完成」（例如 1 秒），系統會強制在這段時間內把所有彈跳動作做完。設定好時間後，可以再設定 Bounce（彈性值）
Bounce 設低：動作比較平緩，結尾輕微震盪。
Bounce 設高：為了在有限的時間內把「彈跳」表現完，開頭的衝速會變快、過程會極度 Q 彈。
適用場景是當你有嚴格的動畫時間限制（如 UI 必須在 0.3 秒內收合完畢），但又希望帶有一點彈性質感時，可以用 Time 來精準掌控時間。
模式二：Physics（真實物理模式）
這個模式完全由物理參數決定動畫，動畫總共要花幾秒，是由你設定的物理數值計算出來的果。調校物理模式主要靠這三要素的平衡：
Stiffness（剛性 / 硬度）
代表彈簧的硬度。數值越高，反應越猛烈、爆發力越強，但也會帶來更多能量與回彈。
Damping（阻尼 / 避震）
就像汽車的避震器。阻尼越高，越能快速吸收能量、抑制震盪；阻尼越低，彈簧就會像沒煞車一樣一直晃個不停。
Mass（質量 / 重量）
代表物件的重量。質量越大，啟動時的慣性越大（比較沉重），但一旦動起來就會帶有更多能量，需要花更多時間才能減速停靠。
想做大型、沉重的元件時可以增加 Mass；想讓動作快速俐落、不想讓使用者等太久時可以增加 Damping 來煞車；想做出具備爆發力的按鈕點擊感時則可以調高 Stiffness。
不同品牌風格的「動畫配方」
動畫曲線其實就是品牌的「性格語言」。
很多人以為品牌風格只靠配色、字體和圖片來呈現，但視覺動態也是影響第一印象的隱形推手！流暢且符合情境的動態節奏，能默默在使用者心中建立對產品的信任感與個性認知。
你可以根據網站的定位與想傳達的氛圍，參考以下配方：
金融、醫療、法律（專業權威）
建議設定：慢速 Ease In Out，幾乎不使用 Bounce 或 Spring。
視覺感受：給人沉穩、精密與絕對可信的安心感，避免輕浮或過度晃動。
電商、消費品、SaaS 服務（活力現代）
建議設定：中等速度 Spring，搭配小幅度的 Bounce。
視覺感受：傳達出親切、有活力且高效的感受，活潑卻不失可靠。
玩具、童趣、遊戲、個人品牌（創意 Q 彈）
建議設定：Q 彈的 Spring，適度降低 Mass 和 Damping。
視覺感受：展現靈動、可愛且極具個性的視覺回饋，讓每次點擊都像在玩遊戲。
結語：讓動畫為你的 UI 注入靈魂
好的動畫可以讓使用者在操作時感到自然、順暢且充滿視覺回饋。
下次當你逛到某個讓人忍不住一直滑、一直點的精緻網站時，可以停下來看看它是用了溫和的 Ease Out？還是藏了微小的 Spring 彈力？也許就能發現做出能讓人上癮的網站細節秘密！✨