什麼是緩動函數呢?
在動畫影像裡面,有個基礎的 動畫的十二法則(中文翻譯版),這是來自於迪士尼動畫早期所訂定出來的基本法則,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/
如果你有任何自己的作品,非常乾淨,特效做得很細膩,想要推薦給我們的話,不用害羞可以直接寫信給我們喔 🥰