如何讓動效更有細節-2

本系列的上一篇，我們講如何使動效的設計更有細節時提到兩點：豐富原有圖形結構的動態設計和增強多層次細節的表現。

基於以上兩點，讓動效的設計更加細膩的方式，還有另外兩點。即元素互動與動畫曲線。

元素互動。指的就是構成一整個動效的元素之間，應該有所互動，而非互相隔離。

這同樣是來自我們常提的“現實經驗”。現實有幾個特點，其中最主要的幾個就是：沒有完全靜止的物體；沒有絕對孤立的個體。

第一個特點使我們在動效中模仿現實時始終需要保持動態物件是“活”的。如果保持呆滯的狀態，就會讓人感覺很假。

第二個特點使我們在動效設計中，多注意各個元素之間的互動作用。這就是我們現在說的元素互動。

比如我們有這樣一個控制元件，需要設計它的入場動畫。


根據它的設計結構分析，綠色欄條是承載黃色箱子圖示與黑色文字元素的底座。所以入場動畫應該先讓底欄入場，而後是文字和圖示的入場。但它們之間的時間差不應太多。

所以就可以設計出這樣的一個基準動畫：


文字的入場方向遵守我們此前提到的圖形邏輯關係：讓它們和底欄的伸展動畫保持同向運動。箱子圖示的顏色和位置決定了它是這個控制元件中最重要的物品。為它設計一個由下往上飛動又摔在底欄條上的動畫從而凸顯它的重要性。

這樣的動畫其實也能滿足功能與視覺效果了，但是如果想讓動畫更加生動，我們可以嘗試為它增加元素之間的互動。

目前的效果中，顯然是沒有互動的，除了文字的入場方向受底欄伸展效果影響之外。

這其中最明顯的關係，就是箱子圖示摔在底欄上的動作。如果能將它的力道傳遞給底欄甚至是文字，效果會大不一樣：


上圖這個新的效果中，我們增加了底欄受箱子撞擊的反應。文字也都相應加了一點相似的效果。

是不是看起來更加生動了呢？這就是一點點元素互動作用帶來的效果。

動畫曲線。曲線的重要性如何強調都不過分。它是構成動畫最基本的元素。但這裡的重點並不是告訴你什麼動作應該設計什麼曲線，想要了解這些，可以看下過往的相關文章。相信大家已經非常熟悉這一點。

這裡要說的是，動畫曲線的微弱調整會影響動效在整體上的表現，尤其是一些細節的有無，非常影響整體動畫的樣子。其實這一點也和上一點有所聯動，有時候一些微弱的曲線調整正是想要帶給元素間互動效果的。

比如我們有這樣一個控制元件：


它可以被設計成這樣的動作：


這看起來是個很平常的抖動紅點效果。一般情況下應用起來是沒有什麼問題的。

這時候它的運動曲線是這樣的：


但是如果我們需要在一個風格別緻的介面裡設計動效。比如說需要富有彈性的風格，這樣一個“普通”的彈動效果可能就不足夠生動了。

這時可以將它的曲線進行這樣的微調：


可以看到，起始幀到第一個擺動角度的曲線是典型的慢入快出動作，這意味著一段“預備動作”。第二幀到第三幀也是一段慢入快出動作，意味著從這個角度回到另一個相對點的動作會有個漫長的加速過程。等它回彈回去到第四幀時，卻是一個快入慢出的曲線，這意味著能量的爆發。這樣的動作給了氣泡本身很多彈性因素，而且相對之前的運動曲線，這個曲線的總時長也做了一些調整。

這時候物體的運動狀態看起來就會是下面這樣：


看起來是不是曲線的調整非常的微弱呢？但最後的效果是不是差別很大？這就是曲線微調的威力。

這只是個很簡單的小例子，但在實際工作中，我們會遇到結構更加複雜的情況。我們就需要對其中一些部件或者元素的運動進行詳細的分析，認清它們互相之間的關係，對它們應有的“生動”運動進行“還原”，這是動效設計中最有趣的部分。

希望這些小例子為你帶來有用的東西，也期待你的實踐反饋。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/Gr71LxU_yP91rr-EIEXowQ