本文讲解贝塞尔曲线一部分的使用技巧
nice 标签功能的进化版，先上图，Gif
原文点击这里：http://www.zengxianhua.com/2016/02/16/dong-hua-de-wei-miao-zhi-chu/
XHTagView.gif
概念
贝塞尔曲线（The Bézier Curves），是一种在计算机图形学中相当重要的参数曲线（2D，3D的称为曲面）。
在iOS开发中，我们使用UIBezierPath来绘制贝塞尔曲线的。
UIBezierPath 对象是 CGPathRef 数据类型的封装，如果是基于矢量形状的，都用直线和曲线段去创建，我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。
每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。
每一个直线段或者曲线段的结束的地方是下一个的开始的地方。
每一个连接的直线或者曲线段的集合成为SubPath。
一个 UIBezierPath 对象定义一个完整的路径包括一个或者多个 SubPaths。
创建和使用一个Path对象的过程是分开的。创建 path 是第一步，包含一下步骤：
- 创建一个 UIBezierPath 对象。
- 使用方法 moveToPoint: 去设置初始线段的起点。
- 添加 line 或者 curve 去定义一个或者多个 SubPaths。
- 改变 UIBezierPath 对象跟绘图相关的属性。
我们可以设置 stroked path 的属性 lineWidth 和 lineJoinStyle，也可以设置 filled path 的属性 usesEvenOddFillRule。
当创建 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
组合
通过封装好的动画模型组合成最终动画效果。
6A899D85-0FBE-49CF-8FC0-41B12B3A4BC0.jpg
Demo的源码， -_-吻我
下一期：认真审视自己走过的路
网友评论