這是本章的第二個(gè) demo，下面這個(gè)案例中，我把線條動畫和數(shù)學(xué)知識結(jié)合在了一起。通過這個(gè)案例，可以很好地向你展示如何自己歸納出一個(gè)數(shù)學(xué)公式，并把它用到一個(gè)自定義動畫中。

首先，我們還是先看最終效果 ：

OK，可以看到隨著手指在屏幕上滑動距離的改變，線條一開始逐漸靠攏，到達(dá)一定位置后開始彎曲，最終合并成了一個(gè)圓。順便一提，我已經(jīng)把這個(gè)動畫封裝到了一個(gè)上拉、下拉刷新的控件中，并且用在了大象公會這款獨(dú)立開發(fā)的 App 中。 你可以提前下載下來一睹實(shí)際效果。

在這里我還是要推薦下我自己建的iOS開發(fā)學(xué)習(xí)群：680565220，群里都是學(xué)ios開發(fā)的，如果你正在學(xué)習(xí)ios ，小編歡迎你加入，今天分享的這個(gè)案例已經(jīng)上傳到群文件，大家都是軟件開發(fā)黨，不定期分享干貨（只有iOS軟件開發(fā)相關(guān)的），包括我自己整理的一份2018最新的iOS進(jìn)階資料和高級開發(fā)教程

下面講講我是怎么思考這個(gè)動畫的。首先，最終控制這個(gè)動畫進(jìn)度的是一個(gè)?CALayer?內(nèi)部的自定義的屬性：

@property(nonatomic,assign)CGFloat progress;

無論你是通過手指滑動產(chǎn)生偏移量，還是滑動 UISlider 改變一個(gè)數(shù)值，最終都將轉(zhuǎn)化到這個(gè)屬性的改變。然后，在這個(gè)屬性的 setter 方法里，我們讓 layer 去實(shí)時(shí)地重繪，就像這樣：

-(void)setProgress:(CGFloat)progress{

? ? self.curveLayer.progress = progress;

? ? [self.curveLayer setNeedsDisplay];

}

至于重繪的算法，屬于細(xì)節(jié)上要考慮的事了。我們做一個(gè)動畫的步驟都是先考慮宏觀，再去考慮細(xì)節(jié)上的實(shí)現(xiàn)。就像開發(fā)一個(gè) App 一樣，一開始肯定是先考慮架構(gòu)，再去往這個(gè)框架里添磚加瓦，修修補(bǔ)補(bǔ)?，F(xiàn)在，我們對這個(gè)動畫的整體思路已經(jīng)清楚了，下面開始深入到細(xì)節(jié)去思考具體算法的實(shí)現(xiàn)。我把這個(gè)動畫分成了兩個(gè)階段：0～0.5 和 0.5～1.0。 這是什么意思？

做動畫還是那句話 ——「善于分解」。我們先看前半程，也就是 progress 從一開始的 0 運(yùn)動到中間狀態(tài) 0.5 的這一個(gè)階段。這一個(gè)階段兩條線段分別從上方和下方兩個(gè)方向向中間運(yùn)動，直到接觸到中線為止。這一階段的畫線算法非常簡單，只要能實(shí)時(shí)獲得 A,B 兩點(diǎn)的坐標(biāo)，剩下用 UIBezierPath 的?moveToPoint,addLineToPoint?就完事了。所以，問題轉(zhuǎn)換成了求 A,B 兩點(diǎn)運(yùn)動的公式（其實(shí)只要求出一點(diǎn)，另一點(diǎn)無非就相差了一個(gè)線段長度 h）。請看演示動畫(注：在電子書中是有交互動畫的，但因?yàn)楝F(xiàn)在是以文章的形式呈現(xiàn)，所以我只能通過圖片的方式向你展示)

其實(shí)你只要愿意動筆在紙上嘗試推演一番，并不難求得這兩個(gè)點(diǎn)的運(yùn)動公式：

yA = H/2 + h + (1-2*progress) * (H/2 - h)

yB = H/2 + (1-2*progress) * (H/2 - h)

接下來是動畫的第二階段 0.5～1.0。這個(gè)階段有些許復(fù)雜：「B 點(diǎn)保持不動，A 點(diǎn)繼續(xù)運(yùn)動到 B 的位置，同時(shí)，在頂部根據(jù)當(dāng)前的進(jìn)度再畫出圓弧」。視覺上給人的感覺就好像尾巴在逐漸縮短，頭部在慢慢彎曲。同樣的，我只能以圖片的形式向你展示。

在這個(gè)過程中，我們不難先求得 A 點(diǎn)的坐標(biāo)是：

yA = H/2 + h - h*(progress - 0.5) *2

比較麻煩的是這個(gè)圓弧該怎么畫？答案是可以用 UIBezierPath 中提供的?- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);?這個(gè)方法繪制出圓弧。具體思路是：以CGPointMake(self.frame.size.width/2，self.frame.size.height/2)?為圓心，10?為半徑，按順時(shí)針方向，從?M_PI(90°)?的起始角度，畫到?2*M_PI?的結(jié)束角度。

關(guān)于?- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;?方法的解釋：如果設(shè)置開始角度均為 0 ，結(jié)束角度均為 π。那么設(shè)置 clockwise（順時(shí)針） 為 YES 時(shí)，畫出的是下半段圓弧；反之， 設(shè)置 clockwise（順時(shí)針） 為 NO 時(shí)，畫出的是上半段圓??；

以上，我們只完成了一條線段的整個(gè)過程。同理，也能獲得另一條線段的繪制算法。最后，別忘了線段頂端還有個(gè)箭頭。繪制箭頭的算法 Gallery 4.1：我們以 B 點(diǎn)作為箭頭的起始起點(diǎn)，斜向左下方 30° 角延長 3 個(gè)單位。彎曲之后也同理，只需要額外加上線段轉(zhuǎn)過的角度即可。

相應(yīng)的代碼就是：

[arrowPath moveToPoint:pointB];

[arrowPath addLineToPoint:CGPointMake(pointB.x - 3*(cosf(Degree)), pointB.y + 3*(sinf(Degree)))];

[curvePath1 appendPath:arrowPath];

OK，這一個(gè) demo 的分析到這里就結(jié)束了。完整代碼可以在本書對應(yīng)的?Github Repo?中下載。