《A GUIDE TO IOS ANIMATION 2.0》

前陣子看了一本書(shū)《A GUIDE TO IOS ANIMATION 2.0》，是一個(gè)iOS動(dòng)畫(huà)方面的書(shū)，感覺(jué)講的不錯(cuò)，但是很多地方?jīng)]有細(xì)節(jié)，我也是在一邊閱讀，一邊寫(xiě)成文章，把細(xì)節(jié)部位幫大家縷出來(lái)。說(shuō)實(shí)話(huà) ，動(dòng)畫(huà)寫(xiě)起來(lái)還是挺有意思的，不像寫(xiě)UI那么枯燥，不像寫(xiě)算法那么?????，你寫(xiě)過(guò)的東西最終都通過(guò)動(dòng)畫(huà)的方式展現(xiàn)出來(lái)！

貝塞爾曲線簡(jiǎn)介

頭一次聽(tīng)，可能以為他和牛頓定律，斐波那契數(shù)列一樣是由一個(gè)名字叫貝塞爾的人發(fā)明的，然而并不是。其實(shí)貝塞爾曲線的數(shù)學(xué)基礎(chǔ)最早是1912年就在當(dāng)世廣為人知的伯恩斯坦多項(xiàng)式，那什么又是伯恩思坦多項(xiàng)式呢，簡(jiǎn)單地說(shuō)，伯恩斯坦多項(xiàng)式是用來(lái)證明，在 [a, b]區(qū)間上所有的連續(xù)函數(shù)都可以多項(xiàng)式來(lái)逼近，并且一致收斂，再簡(jiǎn)單地說(shuō)，就是在一個(gè)連續(xù)函數(shù)，你可以將它寫(xiě)成n個(gè)伯恩思坦多項(xiàng)式相加的形式，并且隨著n 趨向于無(wú)窮大，這個(gè)多項(xiàng)式將一致收斂到原函數(shù)。

聽(tīng)不懂，沒(méi)關(guān)系，繼續(xù)往下看。

雖然在1912年就已經(jīng)被發(fā)現(xiàn)，但是其對(duì)圖形的適用性在半個(gè)世紀(jì)內(nèi)者也沒(méi)有被實(shí)現(xiàn)，直到1959年在雪鐵龍汽車(chē)就職的數(shù)學(xué)家 Paul de Casteljau，開(kāi)始對(duì)伯恩斯坦多項(xiàng)式進(jìn)行圖形化的嘗試，并推出一種新的數(shù)值穩(wěn)定(即在求伯恩斯坦多項(xiàng)式的時(shí)候不會(huì)引入數(shù)值誤差)遞歸算法 de Casteljau 算法用來(lái)伯恩斯坦多項(xiàng)式。根據(jù)這個(gè)算法，就可以只通過(guò)很少的控制點(diǎn)，去生成復(fù)雜的平滑曲線，也就是貝塞爾曲線。而貝塞爾曲線的成名，得益于法國(guó)工程師 Pierre Bézier ，他將這種算法用來(lái)輔助雷諾汽車(chē)的車(chē)體工業(yè)設(shè)計(jì)，并且得到廣泛宣傳。

$\color{rgb(255,0,0)}{下面進(jìn)入主題??}$ （具體貝塞爾語(yǔ)法在實(shí)踐中講述）

源碼地址

我的github ： https://github.com/290138645/RLAnimation.git

實(shí)現(xiàn)效果

圓形動(dòng)畫(huà).gif

代碼實(shí)現(xiàn)

通過(guò)上圖可以看到效果，直觀的感覺(jué)小球發(fā)生了形變。所以可行的做法就是：我們用4條貝塞爾曲線 $\color{rgb(255,0,0)}{[拼]}$ 出這個(gè)小球的形狀。有了這四條單獨(dú)的曲線，然后，我們只需要單獨(dú)控制每條貝塞爾曲線的形狀，實(shí)時(shí)調(diào)用layer的[self setNeedsDisplay] 以重繪-(void)drawInContext: (CGContextRef)ctx方法，就可以間接地實(shí)現(xiàn)控制小球形狀的目的了。