列表項(新聞列表、郵件列表等)所使用的動效,在實際運動的過程中,項和項之間應該有輕微的延遲,元素之間的延遲應該控制在20~25毫秒之間,如果持續時間再長,可能會給人一種遲滯的觀感。
緩動
緩動指的是物體在物理規則下,漸進加速或減速的現象。在動效中加入緩動的效果能夠讓運動顯得更加自然,這是運動的基本原則之一。對于緩動,迪士尼的兩位關鍵性的動畫大師 Ollie Johnston 和 Frank Thomas 在他們的著作《The Illusion of Life: Disney Animation》中有過非常詳盡的描述。
為了不讓動效看起來機械或者人工痕跡太明顯,元素的運動應該有漸進加速和漸進減速的特征,就像物理世界當中其他的物體這樣。
勻速直線運動
不受任何物理力量的影響,勻速直線運動看起來是非常不自然的,尤其是對于人眼而言。
所有用來設計動畫的應用都會使用坐標軸和曲線來闡述動效的運動特征,我將嘗試闡述它們的含義,以及如何使用。坐標軸的 X軸是實現,而 Y軸則表示的唯一,換句話來說,如同我們在初中物理中所學到的,坐標軸上的線條描述的是速度和加速度的特征。
下面所示的直線,表示速度是均勻的,也就是勻速直線運動,物體在相同時間內運動的距離是不變的。
均勻的變化通常只會用在色彩的改變或者透明的改變上,一般來說,我們也可以讓背景元素均勻運動,而前景元素保持不變,來呈現它的狀態,就像上圖一樣。
緩動加速曲線
通過曲線我們可以看到,物體開始時候的初速度比較低,運動緩慢,隨后速度逐漸增加,這意味著物體在加速運動。
當物體加速飛出屏幕的時候,可以使用這種加速曲線,比如界面中被用戶使用滑動手勢甩出去的卡片。但是請記住,只有當運動對象需要完全離開界面的時候才會這么使用,如果它還需要再回來的話,則不行。
動畫曲線有助于正確傳達訊息,甚至表達情緒和感覺。在下面的案例當中,我們可以看每個元素的運動位移是完全一樣的,所消耗的總時長也是一樣的,但是運動的速率變化是不同的,這一點也體現在曲線上,所表現出來的情緒也不同。
當然,通過調整曲線,你能夠讓物體的運動軌跡盡可能接近現實世界。