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

2024-07-05 05:08:56

字體：大中小

供稿：網(wǎng)友

AE貝塞爾曲線制作彈性動畫三聯(lián)

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

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

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

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

　　兩張圖看懂怎么繪制：

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

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

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

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

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

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

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

　　怎么樣把這條位移曲線轉(zhuǎn)換成開發(fā)語言呢?獲得有效參數(shù)的方法是這樣的：(以PS為例)

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

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

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

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

　　它的原理是什么呢?

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