以《荒野亂鬥》為例，一文搞懂介面動畫曲線

導語

玩《荒野亂鬥》除了升杯，還能get新技能！趁熱一起來看一下動畫曲線在《荒野》中的巧妙應用吧！

最近一款遊戲火遍大江南北，朋友圈都在玩啊。對啦！這就是《荒野亂鬥》！遊戲本身乾淨利落，打了一把還想來一把（可不麼～），這兩天哼哧哼哧打到四位數杯的杯數，發現遊戲除了好玩（那當然）還是很多細節值得關注的。其中很多介面動畫的應用就增色不少，不愧為 Supercell 出品，值得學習。今天我們就主要來討論介面動畫的一些細節，玩遊戲漲姿勢豈不美哉。

在介面設計中，蘋果認為“運用恰當的動畫可以傳達狀態，提供反饋，增強操控感，更形象的展現出行為使用者的結果”。介面動畫的本質是元素一系列可視的變化。是可以被計算被觸發和控制的。一般來說，介面動畫需要一個觸發條件，然後這個觸發條件影響元素的屬性變化。如果元素可變化的屬性是確定的，那接下來要考慮的是這個屬性的值如何變化，整個變化其實就是動畫能夠呈現出的效果。


看到上面的三個小球繞大球的軌道動圖的例子，元素變化的屬性只有小圓的旋轉屬性。但是應用了三個不同的動畫曲線。屬性相同但是數值變化不同就能帶來不同的感受。這裡第一個是應用的線性動畫，第二個是比較常見的緩入緩出動畫，第三個就是彈性動畫。

動畫曲線是動畫過程的描述，同樣也是對動畫過程結果的記錄，換句話說我們可以通過這種結果來預知動畫的效果。因此讀懂動畫曲線對於我們採用何種的動畫設計有比較快速的指導。在很多介面變化中，可以知道哪些可以更適用，或者直接不適用。比如說開始的例子中，模擬軌道執行的動畫時，彈性動畫基本不會是首選。而線性動畫反而更適用。

這裡也延伸到另一個問題。這些動畫曲線並非有好壞之分。你不能說彈性動畫就比緩出緩入更好。如果整個介面中都使用未經調配的彈性動畫，想象點一下就感覺彈簧在彈跳，真是會晃瞎眼睛。而各種曲線的不同場合的配合，各司其職，才會神不知鬼不覺的使用動畫打造更好的體驗。

接下來我們將會以這三種不同的動畫型別來看一下《荒野亂鬥》的介面動畫是如何應用的。

我們回到曲線本身，剛才有說“如果元素的可變化的屬性是確定的，那接下來要考慮的是這個屬性的值如何變化”。元素的屬性有很多，座標、透明度、大小、顏色等等。為了使曲線的分析更加方便和直觀，我們將屬性限定在一個位移的座標軸中。也就是說元素的位移變化方式應用到一種曲線後會如何變化。如果按照一個物體從 A 處移動到 B 處，為了能將各類曲線橫向比較，我們需要一個相同的因子，在這裡我們確定位移的距離 x 是一致的，各種曲線在這個時間區間 t 中，各個時刻的造成的速度並不是恆定的，為了能夠展現出曲線的影響，我們要記錄到一段時間區間中，元素的位移量是多少。換句話說，我們要對位移過程做單位時間上的取樣。這裡我們將最開始的三個動畫的曲線進行了取樣（文末有采樣的程式碼來源），得到了三種不同的曲線。



這裡的三條曲線就是我們經常能夠看到的三大類動畫曲線。基於時序補間的線性和緩入緩出動畫曲線以及基於物理性質的彈性動畫曲線。

緩出緩入類曲線  

在看這三條曲線前我們先來看一下最常見的緩出EaseOut動畫曲線。其實中文已經說明的很清楚了就是緩慢的離開。為什麼是緩出呢？我們來看具體的曲線：


為了能夠通用的解讀曲線的特徵我們首先將曲線進行分解，我們將橫軸切分3分之一，縱軸我們先劃分到1/2（當然你也可以劃分的更細）。可以看到，在A點的位置上，在不到1/3的時間內，已經走完了1/2的路程。而剩下的大約2/3的時間走完剩下的路程。這就是為什麼這樣的曲線被稱之為緩出曲線。在實際的應用效果中。元素越在後面就速度越慢。這樣來理解是不是整體會清晰很多？


接下來我就要開始從荒野亂鬥給大家舉例了，緩出動畫主要用在了文字資訊的反饋上。注意介面中帶陰影文字內容的出現。當然這裡除了透明度的變化外，還有位移的變化。



看完緩出曲線我們就可以看一看緩入緩出了，也就是我們剛取樣的第二條曲線。



按照同樣的方法，我們可以看到在開始1/3中速度都很慢，一直都沒有過半，但是在中間階段時完成了近80%的路程。而後又慢下來，1/3的時間留給了剩下的路程。這就可以很好的理解什麼是緩入緩出了，即在開始和結尾處的地方降低值的變化，而由於頭尾的時間的佔用，中間速率會比較高。在介面中這種曲線也比較好用。因為在可以合適的吸引使用者的注意力，又比較自然的展示元素內容。而且在距離等數值計算上也比較好理解，你可以看到C點位置，在整個動畫的時間中點正好也是數值的中點。

線性動畫

好了 我們再來看最基本的線性動畫吧。其實為什麼不放在第一個講的原因是如果直接劃分割槽塊的話反而不好說明這個曲線的特點。當然你依舊可以劃分等分。這樣你會看到在每時每刻，它的速度都是一樣的。通常來說我們並不會很大量的使用線性動畫。因為在展示上會顯得不那麼活潑。



但是我們換個視角來看直線的話。就像下面這樣。將空間和時間繼續延伸。你會發現，它依舊是一樣的。所以在開始的示例中。像軌道的這種動畫。反而顯得更加自然。因為整個過度是平滑的。就像剛才所說,並不是要使用多“高階”的曲線。利用到線性動畫的話依舊可以有流暢的體驗。



而在荒野亂鬥中，最典型的就是在匹配過程中的中間獎章的旋轉動畫。你會發現他可以無限迴圈下去。如此高頻場景並沒有“複雜”的曲線，簡單直接。包括背景的圖案也是基本以相同的速率來位移。

彈性動畫曲線  

接下來我們繼續來看一下更為複雜的情況--彈性動畫曲線。通過剛剛的動畫的取樣，你會發現他跟緩入緩出這種有點不一樣。曲線一些位置上超出了座標的範圍。仔細來看會發現，在1/3的時刻動畫其實已經到達終點了（約B點位置）。但是他並沒有停下，而是繼續向外走了一些。而後用了2/3的時間回到終點。之所以叫彈性動畫，就是因為它就像彈簧一樣，釋放的時刻並不是自己的靜止時的長度。他會超出自己自身的長度。然後花一段時間恢復平靜。整個過程都很符合彈簧的物理特徵。正如這種特性，在應用這種曲線的時候要掌握好元素所在環境，運用得當也是一種非常自然的動畫方式。



彈性動畫在介面中的使用目前來看是非常普遍的，比如像遊戲中的結算頁面，資訊視窗的彈出大多使用了彈性動畫，你可以注意到，窗體彈出的那個時刻大於實際的尺寸。這種動畫的好處是在這裡就比較好的引導使用者關注到結算資訊。


目前我們為了分析方便都是在討論單個屬性的數字變化，但在實際的應用中，涉多個屬性的變化是可以複合的，比如位移+透明度就是常見的變化模式。荒野亂鬥中有很多轉場還有氛圍的動畫中都是不能簡單用一種屬性一種曲線來進行概括。由於每個值都可以應用不同的曲線，這種組合帶來的效果也是千變萬化，這也是在動效設計中的創意來源。在這裡就不冗述展開了。

文章的最後，請記住下面的最特徵的3個曲線，無論何種變化，基本上都是這幾個的演變，那麼動畫曲線就萬變不離其宗了。



文章中的閱讀曲線的方法，將曲線劃分割槽域，除了可以分析最終的曲線，其實也可以大致通過這個方式來判斷介面中的動畫型別。至此你應該具備了基本的動畫型別的識別能力，通過動畫的特徵就能結合曲線可能的走勢作出大致的判斷。這樣就可以非常靈活和借鑑到各種好的案例在自己的專案中了。最後祝大家在荒野亂鬥中快快升杯哦！


附錄


1 、蘋果爸爸說的話來自這裡：https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/animation/
2、這裡有取樣使用的原始碼 https://gist.github.com/chriseidhof/f1bfea3b26ed23c26f2b016a2d618ba4
3、更多型別的曲線可以參照這裡：https://easings.net/ ，詳情頁有比較詳細的效果應用


來源： 騰訊PPdesign
原地址：https://mp.weixin.qq.com/s/Ee4rLKzn2BVRcMiIQlelNQ