动画的微妙之处_动画的理解

本文讲解贝塞尔曲线一部分的使用技巧

应用程序nice标签功能的进化版，先上图，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=[UIBezierPathnew];
[pathmoveToPoint:CGPointMake(20,200)];
[pathaddLineToPoint:CGPointMake(100,100)];
[pathaddLineToPoint:CGPointMake(200,100)];
[pathaddArcWithCenter:CGPointMake(200+5,100)radius:5startAngle:M_PIendAngle:(M_PI-0.1/180*M_PI)clockwise:YES];
[pathaddLineToPoint:CGPointMake(100,100)];
[pathclosePath];

layer.path=path.CGPath;

封装

对构建好的动画模型进行封装，提供方便的API和样式控制参数。

@classXHBranchLayer;

typedefvoid(^XHBranchLayerAnimationCompletion)(BOOLfinished,XHBranchLayer*branchLayer);

@interfaceXHBranchLayer:CAShapeLayer

@property(nonatomic,assign)XHBranchLayerDirectiondirection;

@property(nonatomic,assign)CGPointstartPoint;
@property(nonatomic,assign)CGPointmidPoint;
@property(nonatomic,assign)CGPointendPoint;

@property(nonatomic,assign)CGFloatradius;
@property(nonatomic,assign)CGFloattoValue;
@property(nonatomic,assign)NSTimeIntervalpathDuration;

-(void)animationDelay:(NSTimeInterval)delay
completion:(XHBranchLayerAnimationCompletion)completion;

@end

组合

通过封装好的动画模型组合成最终动画效果。