本文講解貝塞爾曲線一部分的使用技巧
nice 標簽功能的進化版，先上圖，Gif
原文點擊這里：http://www.zengxianhua.com/2016/02/16/dong-hua-de-wei-miao-zhi-chu/
概念
貝塞爾曲線（The Bézier Curves），是一種在計算機圖形學中相當重要的參數曲線（2D，3D的稱為曲面）。
在iOS開發(fā)中，我們使用UIBezierPath來繪制貝塞爾曲線的。
UIBezierPath 對象是 CGPathRef 數據類型的封裝，如果是基于矢量形狀的，都用直線和曲線段去創(chuàng)建，我們使用直線段去創(chuàng)建矩形和多邊形，使用曲線段去創(chuàng)建?。?strong>arc），圓或者其他復雜的曲線形狀。
每一段都包括一個或者多個點，繪圖命令定義如何去詮釋這些點。
每一個直線段或者曲線段的結束的地方是下一個的開始的地方。
每一個連接的直線或者曲線段的集合成為SubPath。
一個 UIBezierPath 對象定義一個完整的路徑包括一個或者多個 SubPaths。
創(chuàng)建和使用一個Path對象的過程是分開的。創(chuàng)建 path 是第一步，包含一下步驟：
- 創(chuàng)建一個 UIBezierPath 對象。
- 使用方法 moveToPoint: 去設置初始線段的起點。
- 添加 line 或者 curve 去定義一個或者多個 SubPaths。
- 改變 UIBezierPath 對象跟繪圖相關的屬性。
我們可以設置 stroked path 的屬性 lineWidth 和 lineJoinStyle，也可以設置 filled path 的屬性 usesEvenOddFillRule。
當創(chuàng)建 Path，我們應該相對于原點（0，0）管理 Path 上面的點，這樣我們在隨后就可以很容易的移動 Path 了。為了繪制 Path 對象，我們要用到 stroke 和 fill 方法，這些方法在 Current Graphic Context 下渲染 Path 的 line 和 curve 段。
抽象
有時候在理解動畫過程中，我會無從下手，于是乎，我摸索了一個符合自己的方法，就是把動畫的步驟分開后進行抽象化。
在這個演示里面我是如何抽象的呢？
分兩部分
- 直線（可以多段）
- 圓
千萬不要著迷，任何簡潔的控件你都去繪制，有些可以用圖片解決的，盡量用圖片來解決。
在你對貝塞爾曲線的概念有一定了解之后，應該能用偽代碼進行實現抽象出來的可視化內容了。
move to point
add line
add line
draw circle
add line
close
能想象得到是什么嗎？從一個點開始，繪制一條直線，再繪制一條直線，然后畫一個圓，最后繪制一條直線，閉合路徑。
構建
從零碎的偽代碼進行完善實現代碼，一步一步的構建出動畫模型。
UIBezierPath *path = [UIBezierPath new];
[path moveToPoint:CGPointMake(20, 200)];
[path addLineToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
[path addArcWithCenter:CGPointMake(200 + 5, 100) radius:5 startAngle:M_PI endAngle:(M_PI- 0.1 / 180 * M_PI ) clockwise:YES];
[path addLineToPoint:CGPointMake(100, 100)];
[path closePath];
layer.path = path.CGPath;
封裝
對構建好的動畫模型進行封裝，提供方便的API和樣式控制參數。
@class XHBranchLayer;
typedef void(^XHBranchLayerAnimationCompletion)(BOOL finished, XHBranchLayer *branchLayer);
@interface XHBranchLayer : CAShapeLayer
@property (nonatomic, assign) XHBranchLayerDirection direction;
@property (nonatomic, assign) CGPoint startPoint;
@property (nonatomic, assign) CGPoint midPoint;
@property (nonatomic, assign) CGPoint endPoint;
@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) CGFloat toValue;
@property (nonatomic, assign) NSTimeInterval pathDuration;
- (void)animationDelay:(NSTimeInterval)delay
completion:(XHBranchLayerAnimationCompletion)completion;
@end
組合
通過封裝好的動畫模型組合成最終動畫效果。
Demo的源碼， -_-吻我
下一期：認真審視自己走過的路
