AE貝塞爾曲線制作彈性動畫

 

　　在使用貝塞爾曲線制作彈性動畫前我們先來了解貝塞爾曲線實現原理，來理解什麼是符合物理運動規律的動畫效果

　　Android L開始在動效實現方法上有了飛躍提升，散亂的動畫效果主要是沒有統一的理論支撐，終於在android L之後貝塞爾曲線和SVG動畫的普遍使用，使得android原生系統的動效設計成為宣傳的一大亮點。

　　這裡重點說一下貝塞爾曲線。很多人一聽起來覺得是一個特別專業的詞語，其實不然，學過設計或有繪圖軟件基礎的同學接下來都能理解貝塞爾曲線的原理。

　　在百度百科裡面的解釋是："貝賽爾"工具在photoshop中叫"鋼筆工具";在CorelDraw中翻譯成"貝賽爾工具";而在Fireworks中叫"畫筆"。它是用來"畫線"造型的一種專業工具。當然還有很多工具也可以完成畫線的工作，例如大家常用的photoshop裡的直線、噴槍、畫筆工具，Fireworks裡的直線、鉛筆和筆刷工具，CorelDraw裡的自由筆，手繪工具等等。

　　兩張圖看懂怎麼繪制：

　　怎樣看懂貝塞爾曲線? 在開發實現中可以把貝塞爾曲線看做是位移曲線(位置和時間的關系)

　　上面這條曲線就是一條勻速的曲線，是指物體運動從開始到停止都是按照同一個速度移動。

　　大家都知道在移動端的各大ROM廠商或APP公司都在聲稱要做符合物理運動原理、符合用戶心理預期、還原生活場景、有情懷的、更加真實有效的動畫效果等等說法，把這些含蓄的說法轉化成開發語言就是繪制一條看著舒服的運動曲線。那麼什麼樣的曲線才是符合物理運動規律、真實有效的呢?

　　大家試想著從手裡扔出去一塊石頭，扔出的一瞬間是不是有個加速的過程，即速度從0往上增長，然後越來越快，它要落下的時候速度開始減下來，最後落下速度為0。石頭運動的軌跡其實是一個完整的拋物線(即速度曲線)：

　　我們把速度曲線轉換為位移曲線，這條曲線就是我們所需要的：

　　這條曲線是我們根據真實的生活場景推理出來的，具體參數是模糊的，但是我們從中學到了真實的物理運動規律：物體運動是從靜止加速到停止減速的一個過程。

　　平常工作中我們是通過在動畫制作軟件(如AE、Flash)中調節這條曲線最終得到我們看到的動畫效果：

　　怎麼樣把這條位移曲線轉換成開發語言呢?獲得有效參數的方法是這樣的：(以PS為例)

　　在PS裡新建一個1000*1000像素的畫板(為了好計算取整，只要是正方形就行)，把動畫軟件裡的曲線截圖導入到建好的PS畫板裡，曲線的起點和終點分別與畫板的左下角和右上角對齊，這樣就在一個正方形內形成了一條位移曲線：

　　然後在繪圖軟件裡臨摹出這條曲線，調節節點時的支點坐標就是開發需要的參數(以畫板左下角為原點(0,0)，右上角為終點(1,1)。如上圖中黃色的點的坐標就是起點(0.26,0.05)，終點(0.26,0.97)

　　這條曲線是一條最簡單的貝塞爾曲線，在繪圖軟件裡通過調節起點和終點的節點就可以得到這條曲線，更復雜的貝塞爾曲線是由多個節點組成，那是更復雜的函數公式。時間有限，以上是在工作時間僅用了兩個小時整理出來的經驗分享給大家，如果有不准確的地方請多多交流。後面的章節會介紹根據不同需求制作不同的曲線，以及android和iOS曲線的區別。

　　在移動設備上經常會看到彈性的動畫效果，如點開圖片放大的過程、對話框出現反彈的效果等，這些動畫效果用貝塞爾曲線的原理只要繪制一條你想要的曲線，把相應的參數提供給開發就可以輕松實現了，並且可以非常方便的修改效果。

　　它的原理是什麼呢?

　　在上一章節中，我們學會了在一個正方形內繪制曲線，這個正方形內包含了時間和位移的關系，正常的運動曲線都是在這個正方形范圍內完成，即從一個點到到另一個點的運動方式。那麼抖動動畫就相當於運動到終點時沒剎住車超過了目標終點後又返回來，所以相對應的抖動動畫曲線也要超出了這個正方形的范圍。如下圖：

　　根據我們想要的效果，在動畫軟件裡面反復的調，然後提供准確的參數給開發就可以幾乎100%的還原動畫制作的效果了。這個時候的參數肯定不在是0到1的范圍，至少抖動的部分已經超過了1，如下圖的參數：

　　如果用兩個點調節還是不能調出你想要的彈性效果，那麼我們可以在曲線上增加一個點，不過相應的開發就會增加實現難度，就是所謂的分段實現，這個時候需要我們提供四個點的參數及中間一個點的時間點。如下圖：

　　如果還是不能達到你的要求，比如想在界面上多反彈幾次才想停下來，那麼曲線就是如下圖：

　　技術和藝術的結合就是界面設計的產物，設計無止境，繼續學習和探索中