上一篇《Framer Scroll Effect 教學：4 種滾動效果打造互動網站》講完了捲動觸發的動畫，接下來講講 Effect 面板其他五個效果。像是滑鼠靠近時卡片微微浮起，能告訴使用者「這個可以按」；文字進場淡入，是在引導視線該看哪；元素持續轉圈，是在表達「還在載入」，這些細節動畫是讓網站更精緻的關鍵，一起來看看吧～
本篇要介紹的五個效果
選擇任何一個物件，點選右側面板的 Effects 區塊，就能看到這幾種動畫效果：
Appear：元素進畫面時自己播放
Hover：滑鼠移過去的效果（桌面限定）
Press：滑鼠按下、手指按壓的效果
Loop：元素持續循環
Drag：讓使用者可以拖曳該物件
接下來就一起來看看這五個效果吧！
Appear：進場的動畫
沒有設定 Appear 的話，物件會在網頁載入的瞬間直接全部出現。設定 Appear 效果能讓你決定物件「什麼時候出現、怎麼出現」，讓網站更精緻。像是官方教學影片就有示範一個效果：讓 icon 本身和底色設定不一樣的數值，兩層錯開的縮放疊起來，就可以讓 icon 有立體的效果，比單層動畫更有層次感。
來源：Using the Appear Effect in Framer (Animation Lesson 6)
打開 Appear 面板會看到三個欄位：Trigger、Preset、Enter。
Trigger 預設是 On Appear，意思是「元素一進畫面就自動播放」。如果你把 Trigger 改成 On Scroll、Layer in View 等其他選項，等於變成「捲動觸發效果」，標題就會自動改成 Scroll Animation，這部分可以參考另一篇《Framer Scroll Effect 教學：4 種滾動效果打造互動網站》。
Preset 則是提供預設好的進場動畫，常用的像是 Fade In（淡入）、Slide In Top（從上滑入）、Scale In（放大進場）等。
Enter 是定義元素「進場前長什麼樣」，動畫會從這裡設定好的樣子，過渡到它在畫布上原本的樣子。有 Opacity（透明度）/ Scale（縮放）/ Rotate（旋轉）/ Skew（傾斜）/ Offset（位移）/ Transition（動態曲線）可以設定。關於動態曲線的介紹可以看下一篇文章！
Hover：滑鼠移上去時
Hover 面板的選項則是設定滑鼠移上去後的樣子。把 Scale 拉到 1.1（放大 10%），Rotate 設定 20 度，就能讓卡片被滑鼠掃到時微微浮起、稍稍傾斜。如果把 Stiffness 拉低一點、Mass 加一點，可以讓卡片彈起來有「重量」的感覺。
⚠️ 要注意 Hover 是桌面瀏覽時限定，因為手機沒有游標所以不會觸發。想讓手機也有回饋的話，可以一起設定 Press。
⚠️ 如果你想在 Hover 時換底色、換文字、換 icon 等，Hover 沒辦法設定這些，需要把物件 Create Component 後用 Hover Variant 切整個狀態。之後會再寫一篇說明 Component 怎麼做！
Press：滑鼠按下或手指按壓
Press 面板打開後，你會發現跟 Hover 長得一模一樣，唯一差別在預設值，Press 的 Scale 預設 0.9，是縮小。這其實就是一般在設計按鈕時的直覺邏輯：滑鼠移上去預告可以按（放大提示），按下去有確認反應（縮下去像被壓進畫面）。
Loop：物件持續循環
這個效果可以用在哪呢？可以用在像是 Loading icon 不停旋轉、icon 圖示放大縮小提示…等，需要物件自己持續動的場合。
最上面的 Type 有兩個選項可以切換：
Loop：從頭播到尾，跳回開頭再播。像是 Rotate 預設 360° ，就能做出不停自轉的效果
Mirror：從頭播到尾，再倒著播回開頭。可以做出一個滑桿左右來回移動的效果
下面還有一個選項是 Off Screen ，是決定當這個動畫元素不在視窗裡的時候，動畫要繼續播還是暫停。
Pause（預設）：物件離開視窗就暫停，回來看的時候才繼續。這樣設定可以省效能
Play：不管使用者有沒有看，動畫從頁面載入那一刻就一直播、永遠不會停
Pause 可以省下很多效能，瀏覽器就不用一直計算使用者看不到的動畫。但 Pause 有個副作用是會讓 Loop 動畫不同步，因為每個元素進畫面的時間不一樣，先進來的先開始播，如果有兩個動畫的節奏要一致，設定 Pause 就會對不上。
Drag：讓使用者拖曳物件
來源：Using the Drag Effect in Framer (Animation Lesson 5)
Drag 讓使用者能抓取網頁裡的物件，除了動態曲線外，有幾個選項可以設定：
Freeform（自由拖曳） 決定「使用者可以拖到多遠」：
Yes：拖到哪都行，可以拖出原本的 frame，畫面上想放哪就放哪
No：只能在你指定的一個容器範圍內拖，撞到邊界會停下來，所以需要選擇一個 Section 當作範圍
Snap Back（放手回位） 決定「放手之後會怎樣」：
Yes：放手就自動彈回原本位置，像被橡皮筋拉住
No：放手就停在你放的地方，不會自動回來
Momentum （慣性）設定「放手後元素會不會繼續滑」：
只有在 Snap Back=No 或 Freeform=No 的時候才會出現這個選項
Yes：依你放手前的速度繼續滑一段，才慢慢停下
No：放手立刻停在原位，沒有任何拖尾
總結
其實每個 Effect 都是在描述「從一個狀態到另一個狀態」，Hover 是從靜止到滑鼠上時的樣子、Press 是從靜止到按下時的樣子、Appear 是從進場前的樣子到當前樣子、Loop 是在兩個狀態之間來回；Drag 是從原位到使用者指定的位置。
而中間過渡的效果，也會大幅決定這個動畫的感覺，是俐落彈跳還是慵懶滑順呢？是機械線性還是有物理重量？下一篇就會來講講動畫的靈魂，該怎麼設定 Transitions 與 Easing 緩動曲線～