在使用貝塞爾曲線制作彈性動(dòng)畫(huà)前我們先來(lái)了解貝塞爾曲線實(shí)現(xiàn)原理，來(lái)理解什么是符合物理運(yùn)動(dòng)規(guī)律的動(dòng)畫(huà)效果
Android L開(kāi)始在動(dòng)效實(shí)現(xiàn)方法上有了飛躍提升，散亂的動(dòng)畫(huà)效果主要是沒(méi)有統(tǒng)一的理論支撐，終于在android L之后貝塞爾曲線和SVG動(dòng)畫(huà)的普遍使用，使得android原生系統(tǒng)的動(dòng)效設(shè)計(jì)成為宣傳的一大亮點(diǎn)。
這里重點(diǎn)說(shuō)一下貝塞爾曲線。很多人一聽(tīng)起來(lái)覺(jué)得是一個(gè)特別專業(yè)的詞語(yǔ)，其實(shí)不然，學(xué)過(guò)設(shè)計(jì)或有繪圖軟件基礎(chǔ)的同學(xué)接下來(lái)都能理解貝塞爾曲線的原理。
在百度百科里面的解釋是："貝賽爾"工具在photoshop中叫"鋼筆工具";在CorelDraw中翻譯成"貝賽爾工具";而在Fireworks中叫"畫(huà)筆"。它是用來(lái)"畫(huà)線"造型的一種專業(yè)工具。當(dāng)然還有很多工具也可以完成畫(huà)線的工作，例如大家常用的photoshop里的直線、噴槍、畫(huà)筆工具，F(xiàn)ireworks里的直線、鉛筆和筆刷工具，CorelDraw里的自由筆，手繪工具等等。
兩張圖看懂怎么繪制：
怎樣看懂貝塞爾曲線? 在開(kāi)發(fā)實(shí)現(xiàn)中可以把貝塞爾曲線看做是位移曲線(位置和時(shí)間的關(guān)系)
上面這條曲線就是一條勻速的曲線，是指物體運(yùn)動(dòng)從開(kāi)始到停止都是按照同一個(gè)速度移動(dòng)。
大家都知道在移動(dòng)端的各大ROM廠商或APP公司都在聲稱要做符合物理運(yùn)動(dòng)原理、符合用戶心理預(yù)期、還原生活場(chǎng)景、有情懷的、更加真實(shí)有效的動(dòng)畫(huà)效果等等說(shuō)法，把這些含蓄的說(shuō)法轉(zhuǎn)化成開(kāi)發(fā)語(yǔ)言就是繪制一條看著舒服的運(yùn)動(dòng)曲線。那么什么樣的曲線才是符合物理運(yùn)動(dòng)規(guī)律、真實(shí)有效的呢?
大家試想著從手里扔出去一塊石頭，扔出的一瞬間是不是有個(gè)加速的過(guò)程，即速度從0往上增長(zhǎng)，然后越來(lái)越快，它要落下的時(shí)候速度開(kāi)始減下來(lái)，最后落下速度為0。石頭運(yùn)動(dòng)的軌跡其實(shí)是一個(gè)完整的拋物線(即速度曲線)：
我們把速度曲線轉(zhuǎn)換為位移曲線，這條曲線就是我們所需要的：
這條曲線是我們根據(jù)真實(shí)的生活場(chǎng)景推理出來(lái)的，具體參數(shù)是模糊的，但是我們從中學(xué)到了真實(shí)的物理運(yùn)動(dòng)規(guī)律：物體運(yùn)動(dòng)是從靜止加速到停止減速的一個(gè)過(guò)程。
平常工作中我們是通過(guò)在動(dòng)畫(huà)制作軟件(如AE、Flash)中調(diào)節(jié)這條曲線最終得到我們看到的動(dòng)畫(huà)效果：
怎么樣把這條位移曲線轉(zhuǎn)換成開(kāi)發(fā)語(yǔ)言呢?獲得有效參數(shù)的方法是這樣的：(以PS為例)
在PS里新建一個(gè)1000*1000像素的畫(huà)板(為了好計(jì)算取整，只要是正方形就行)，把動(dòng)畫(huà)軟件里的曲線截圖導(dǎo)入到建好的PS畫(huà)板里，曲線的起點(diǎn)和終點(diǎn)分別與畫(huà)板的左下角和右上角對(duì)齊，這樣就在一個(gè)正方形內(nèi)形成了一條位移曲線：
然后在繪圖軟件里臨摹出這條曲線，調(diào)節(jié)節(jié)點(diǎn)時(shí)的支點(diǎn)坐標(biāo)就是開(kāi)發(fā)需要的參數(shù)(以畫(huà)板左下角為原點(diǎn)(0,0)，右上角為終點(diǎn)(1,1)。如上圖中黃色的點(diǎn)的坐標(biāo)就是起點(diǎn)(0.26,0.05)，終點(diǎn)(0.26,0.97)
這條曲線是一條最簡(jiǎn)單的貝塞爾曲線，在繪圖軟件里通過(guò)調(diào)節(jié)起點(diǎn)和終點(diǎn)的節(jié)點(diǎn)就可以得到這條曲線，更復(fù)雜的貝塞爾曲線是由多個(gè)節(jié)點(diǎn)組成，那是更復(fù)雜的函數(shù)公式。時(shí)間有限，以上是在工作時(shí)間僅用了兩個(gè)小時(shí)整理出來(lái)的經(jīng)驗(yàn)分享給大家，如果有不準(zhǔn)確的地方請(qǐng)多多交流。后面的章節(jié)會(huì)介紹根據(jù)不同需求制作不同的曲線，以及android和iOS曲線的區(qū)別。
在移動(dòng)設(shè)備上經(jīng)常會(huì)看到彈性的動(dòng)畫(huà)效果，如點(diǎn)開(kāi)圖片放大的過(guò)程、對(duì)話框出現(xiàn)反彈的效果等，這些動(dòng)畫(huà)效果用貝塞爾曲線的原理只要繪制一條你想要的曲線，把相應(yīng)的參數(shù)提供給開(kāi)發(fā)就可以輕松實(shí)現(xiàn)了，并且可以非常方便的修改效果。
它的原理是什么呢?
在上一章節(jié)中，我們學(xué)會(huì)了在一個(gè)正方形內(nèi)繪制曲線，這個(gè)正方形內(nèi)包含了時(shí)間和位移的關(guān)系，正常的運(yùn)動(dòng)曲線都是在這個(gè)正方形范圍內(nèi)完成，即從一個(gè)點(diǎn)到到另一個(gè)點(diǎn)的運(yùn)動(dòng)方式。那么抖動(dòng)動(dòng)畫(huà)就相當(dāng)于運(yùn)動(dòng)到終點(diǎn)時(shí)沒(méi)剎住車超過(guò)了目標(biāo)終點(diǎn)后又返回來(lái)，所以相對(duì)應(yīng)的抖動(dòng)動(dòng)畫(huà)曲線也要超出了這個(gè)正方形的范圍。如下圖：
