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

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

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

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

　　兩張圖看懂怎么繪制：

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

　　上面這條曲線就是一條勻速的曲線，是指物體運(yùn)動(dòng)從開始到停止都是按照同一個(gè)速度移動(dòng)。

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

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

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

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

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

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

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

　　然后在繪圖軟件里臨摹出這條曲線，調(diào)節(jié)節(jié)點(diǎn)時(shí)的支點(diǎn)坐標(biāo)就是開發(fā)需要的參數(shù)(以畫板左下角為原點(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)單的貝塞爾曲線，在繪圖軟件里通過調(diào)節(jié)起點(diǎn)和終點(diǎn)的節(jié)點(diǎn)就可以得到這條曲線，更復(fù)雜的貝塞爾曲線是由多個(gè)節(jié)點(diǎn)組成，那是更復(fù)雜的函數(shù)公式。時(shí)間有限，以上是在工作時(shí)間僅用了兩個(gè)小時(shí)整理出來的經(jīng)驗(yàn)分享給大家，如果有不準(zhǔn)確的地方請(qǐng)多多交流。后面的章節(jié)會(huì)介紹根據(jù)不同需求制作不同的曲線，以及android和iOS曲線的區(qū)別。

　　在移動(dòng)設(shè)備上經(jīng)常會(huì)看到彈性的動(dòng)畫效果，如點(diǎn)開圖片放大的過程、對(duì)話框出現(xiàn)反彈的效果等，這些動(dòng)畫效果用貝塞爾曲線的原理只要繪制一條你想要的曲線，把相應(yīng)的參數(shù)提供給開發(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)畫就相當(dāng)于運(yùn)動(dòng)到終點(diǎn)時(shí)沒剎住車超過了目標(biāo)終點(diǎn)后又返回來，所以相對(duì)應(yīng)的抖動(dòng)動(dòng)畫曲線也要超出了這個(gè)正方形的范圍。如下圖：

　　根據(jù)我們想要的效果，在動(dòng)畫軟件里面反復(fù)的調(diào)，然后提供準(zhǔn)確的參數(shù)給開發(fā)就可以幾乎100%的還原動(dòng)畫制作的效果了。這個(gè)時(shí)候的參數(shù)肯定不在是0到1的范圍，至少抖動(dòng)的部分已經(jīng)超過了1，如下圖的參數(shù)：

　　如果用兩個(gè)點(diǎn)調(diào)節(jié)還是不能調(diào)出你想要的彈性效果，那么我們可以在曲線上增加一個(gè)點(diǎn)，不過相應(yīng)的開發(fā)就會(huì)增加實(shí)現(xiàn)難度，就是所謂的分段實(shí)現(xiàn)，這個(gè)時(shí)候需要我們提供四個(gè)點(diǎn)的參數(shù)及中間一個(gè)點(diǎn)的時(shí)間點(diǎn)。如下圖：

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

　　技術(shù)和藝術(shù)的結(jié)合就是界面設(shè)計(jì)的產(chǎn)物，設(shè)計(jì)無止境，繼續(xù)學(xué)習(xí)和探索中