什麼是緩動函數呢？
在動畫影像裡面，有個基礎的 動畫的十二法則（中文翻譯版），這是來自於迪士尼動畫早期所訂定出來的基本法則，Cento lodigiani 將它製作成動畫來展示，真的是非常實用的知識，這且這個作者的作品都超棒！
現實生活中的生物 or 物體，並不會以等速度移動，例如我們拿起東西、或者抬起腳走一步路時，會先增加速度，接著慢下來，最後更慢，這是一種物理法則的運動方式。而這十二法則，則是運用一些視覺手法，來增強眼睛的感受。動畫通常在律動間，需要適度的誇張化，能有效提升現實比對的感受。
我們從十二法則挑出幾個比較適合應用在網站設計之中的方法
擠壓與伸展：賦予物體重量與靈活感，藉由擠壓跟伸展，來強調瞬間速度的物理變化。
接續動作與關鍵動作：從關鍵動作先繪製出所需變動的關鍵動作，再細畫出更多中間的細節，這方法非常適合用在我們與客戶溝通時的分鏡圖。
漸快與漸慢：與上面說的一樣，物體的運動並不是等速的。
時間控制：控制好時間，是動畫的靈魂，我們可以將此法則理解成網站設計中的點擊 → 回饋 → 結果，例如選單打開。
大略理解動畫的基礎法則後，我們就可以來使用緩動函數了！
網站設計緩動函數的類型
現在網路上的資源已經非常豐富，我們不太需要真正的去理解正弦曲線、二次方、三次方等，可以透過 緩動函數(Easing function) 表格 直接查看喜歡哪種動態（下表）。
點進去之後則可以看到他的律動範例，網站設計如果是使用 CSS 動畫的話，可以超級簡單的直接複製後面 cubic-bezier(0.87, 0, 0.13, 1) 這個參數貼上就好啦！在頁面往下看更多內容的話，甚至還有 postcss-easings 套件的參數範例、漸層範例，最棒的是有公式，因為這樣就可以把參數客製化到任何地方，例如 Threejs 3D 物件互動時的運動速度，就可以透過公式簡單的 return 數值。
在 ES Design 的網站設計、品牌 LOGO、動畫設計等作品中，我們其實都會大量的使用緩動函數。例如 以下影片，我們為客戶 Ubitus 優必達 LOGO 設計的動畫，每一條線、整體關鍵的開始與結束，都使用了緩動函數。
律動有了曲線就會變得更生動而不生硬
網站設計中該如何選擇何時該使用哪一個函數呢？
上面的函數這麼多，那到底要怎麼選擇應用呢？我們自己這幾年設計經歷下來，整理出幾種比較常用也比較喜歡使用的幾個函數。
獨立使用時 easeInOutExpo
很適合使用在獨立動畫的物件，此函數的律動方式為起始慢 → 中間快 → 結束慢，例如選單或者按鈕 Mouse over 的時候，另外一種像是 Carousel 替換時，因為替換過程是一個獨立的過程，中間不需要任何的關鍵動作。因為是一個獨立動畫，所以需要很完整的起承轉合，這時就非常適合使用 easeInOutExpo。
進場時 easeOutQuint
應用在一種互動的開始時，此函數的律動方式為起始快 → 中間更快 → 結束慢，例如整個網站進場時、或者一個物件進入時，慢慢的停下來。以下範例是 ES Design 做的餐廳網站設計，可以看到 gif 動畫在橫向滾動時，裝飾中文字進入，就是用了 easeOutQuint，由快到慢，只是簡單的四個字排版，卻大大的提升網站質感！
離場時 easeInExpo
離場其實就是進場的相反數值。眼尖的朋友會發現，其實進場離場，就是 easeInOutExpo 的拆分版本。會另外拿出來講是因為，這也是一個非常重要的小細節，我們可以因應各種不同情境而自行拆分。
把這些細節處理得好，一個乾淨標題置中的網站設計，也可以非常的有質感。
當然以上並不能代表全部的動畫都該這樣做，有些非常簡單的小東西增加太多緩動函數的話，也會造成過多效果而煩厭。動畫與平面設計畫面的設計都有個反差的原理，其實是相同的，都要拿捏好對比的層次感，平面設計需要注意色彩、文字、背景、素材之間的對比關係，而動畫也是，例如說有一個動作叫複雜的物件，旁邊則僅能存在動作很簡單的物件，不可以大家都很複雜。
當然你也可以說有些很ㄎㄧㄤ的網站爆炸滿很帥啊，我覺得沒有錯，但那應當是要因應不同的品牌視覺、市場環境下，而選擇的風格方向。目前描述的僅是通用情境。以上粗淺的帶過網站設計的動畫入門原則，還有許多小細節，需要不斷的調整細修，才能更精進。我們覺得不論是設計師、工程師、專案企劃，都應該要理解運動的原則。
上面都在講我們自己的案例，以下再推薦幾個，近期我們覺得非常簡潔，特效也做得很到位的網站設計！
購物車網站設計，簡單的排版搭配適當的轉場特效，體驗起來也會非常舒服 https://www.getobachan.com/
設計公司 / 個人介紹網站設計，注重於元件互動的彼此關係 https://www.exoape.com/ 、https://dennissnellenberg.com/
如果你有任何自己的作品，非常乾淨，特效做得很細膩，想要推薦給我們的話，不用害羞可以直接寫信給我們喔 🥰
