UIButton自定义路径动画

• 欢迎同样喜欢动效的工程师／UI设计师／产品加入我们 
• iOS动效特攻队–>QQ群：547897182 
• iOS动效特攻队–>熊熊：648070256

之前看了一个别人做的汉堡动画的动效，非常有意思，然后在花瓣网上找了一个差不多的，自己尝试着做了一下。

花瓣网上找的动效 

最终代码实现的效果 
gitHub地址：https://github.com/BearRan/CheckBtnAnimation 

说一下，这个动效主要用的就是路径动效，都是在CGPath上操作的。虾面开始讲解制作过程。

准备工作

两个必备软件 
Sketch用户绘制需要的图形和路径 
Sketch链接: http://pan.baidu.com/s/1i4mLxGx 密码: 5d2b 
将Sketch绘制的图形导出sag格式的文件，通过PaintCode转换成路径代码 
PaintCode链接: http://pan.baidu.com/s/1dDLPi5F 密码: ftpt 
本文关于的Sketch和PaintCode的讲解视频，本人亲自录的。 
bilibili播放地址（可以刷弹幕，欢迎吐槽） 
http://www.bilibili.com/video/av4231373/ 
土豆播放地址 
http://www.tudou.com/programs/view/SFqCW0p-plc/

开动！

1，用Sketch绘制图形，一个圆圈和里面的勾，注意，勾和圆圈的路径要连起来的。具体的Sketch使用教程就不说了，自己问度娘。我也是自己慢慢摸索出来的。 
实在不会的我这里有一个我做好的sketch文件，下载下来直接打开就行，可以参考一下http://download.csdn.net/detail/xiongbaoxr/9461562 

2，将Sketch绘制的图形以SVG格式导出，Sketch界面右下角就能看到 

3，将SVG文件拖到PaintCode，就会自动生成路径代码 

4，现在开始代码部分 
先新建一个UIButton类，先贴出代码，代码不是很多，虾面开始一一解释

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <span class="hljs-title" style="box-sizing: border-box;">"CheckBtn.h"</span></span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <span class="hljs-title" style="box-sizing: border-box;">"CALayer+CheckBtnLayer.h"</span></span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> checkStrokeStart     = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.038</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> checkStrokeEnd       = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.195</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> circleStrokeStart    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.28</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> circleStrokeEnd      = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;<span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">CheckBtn</span> ()</span>{    CAShapeLayer *checkShapeLayer;}<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@end</span><span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@implementation</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">CheckBtn</span></span>- (instancetype)initWithFrame:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRect</span>)frame{    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> initWithFrame:frame];    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span>) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>;    }    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.borderWidth</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>f;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.cornerRadius</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span>;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.borderColor</span> = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor] colorWithAlphaComponent:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span>]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>;    checkShapeLayer = [CAShapeLayer layer];    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.path</span> = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> checkPath];    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineWidth</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>f;    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineCap</span> = kCALineCapRound;    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineJoin</span> = kCALineJoinRound;    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.strokeColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>;    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.fillColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> clearColor]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>;    checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.actions</span> = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDictionary</span> alloc] initWithObjectsAndKeys:                     [NSNull null],@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeStart"</span>,[NSNull null],@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeEnd"</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>];    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span> addSublayer:checkShapeLayer];    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.showCheck</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span>;}<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@synthesize</span> showCheck = _showCheck;- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setShowCheck:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span>)showCheck{    _showCheck = showCheck;    CABasicAnimation *strokeStart = [CABasicAnimation animationWithKeyPath:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeStart"</span>];    CABasicAnimation *strokeEnd = [CABasicAnimation animationWithKeyPath:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeEnd"</span>];    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.showCheck</span>) {        strokeStart<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.toValue</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSNumber</span> numberWithFloat:checkStrokeStart];        strokeStart<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span>;        strokeStart<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.6</span>];        strokeEnd<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.toValue</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSNumber</span> numberWithFloat:checkStrokeEnd];        strokeEnd<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>;        strokeEnd<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.15</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.6</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.6</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>];    }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{        strokeStart<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.toValue</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSNumber</span> numberWithFloat:circleStrokeStart];        strokeStart<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span>;        strokeStart<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span> :-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.58</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.88</span>];        strokeEnd<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.toValue</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSNumber</span> numberWithFloat:circleStrokeEnd];        strokeEnd<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.55</span>;        strokeEnd<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span> :-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.08</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.64</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.1</span>];    }    [checkShapeLayer ocb_applyAnimation:strokeStart];    [checkShapeLayer ocb_applyAnimation:strokeEnd];}- (CGPathRef)checkPath{    UIBezierPath* oval1DrawPath = UIBezierPath<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.bezierPath</span>;    [oval1DrawPath moveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">33.85</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">11.21</span>)];    [oval1DrawPath addLineToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16.5</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">26.07</span>)];    [oval1DrawPath addLineToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.95</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.33</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.57</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.3</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.95</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.33</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.21</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.86</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.33</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8.2</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.77</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8.98</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.04</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8.59</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6.12</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6.11</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.87</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7.45</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5.59</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6.62</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8.53</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.08</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6.69</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5.54</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7.62</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4.72</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.79</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.59</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.33</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.79</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">28.09</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.65</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.6</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.79</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">18.78</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.09</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">36.36</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">28.09</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">37.4</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7.39</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">41.1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">18.78</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.91</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">36.36</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">31.61</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">37.4</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20.22</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">41.1</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.71</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">21.82</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5.18</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">33.44</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.47</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">27.88</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.59</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">18.86</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.59</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20.84</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.55</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">19.85</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.06</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15.25</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.64</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">17.66</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.78</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16.45</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.79</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12.78</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.09</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15.12</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.36</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">13.92</span>)];    [oval1DrawPath addCurveToPoint: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.91</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.39</span>) controlPoint1: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.22</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">11.67</span>) controlPoint2: CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.9</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10.41</span>)];    CGPathRef pathRef = oval1DrawPath<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGPath</span>;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> pathRef;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li></ul>

4.1 创建半透明白色圆环作为基底

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.layer</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.borderWidth</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>f<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.layer</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.cornerRadius</span> = self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.frame</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.size</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.width</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2.0</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.layer</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.borderColor</span> = [[UIColor whiteColor] colorWithAlphaComponent:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span>]<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.CGColor</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

4.2 新建一个CAShaperLayer对象CAShapeLayer *checkShapeLayer; 配置checkShapeLayer的参数

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">checkShapeLayer = [CAShapeLayer layer];checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.path</span> = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> checkPath]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里的checkPath就是之前我们生成的path路径</span>checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineWidth</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3.0</span>f;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//线宽</span>checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineCap</span> = kCALineCapRound;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//layer边缘的样式</span>checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lineJoin</span> = kCALineJoinRound;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//layer衔接部分的样式</span>checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.strokeColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//layer描边的颜色，</span>checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.fillColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> clearColor]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGColor</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//layer填充的颜色，注意，这和stroke不一样</span>checkShapeLayer<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.actions</span> = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDictionary</span> alloc] initWithObjectsAndKeys:                     [NSNull null],@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeStart"</span>,[NSNull null],@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeEnd"</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//layer增加动画事件</span>[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span> addSublayer:checkShapeLayer];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

4.3 后面设定按钮点击动画

4.3.1 这四个参数分别是“Check”和“Circle”这两种不同形状时的strokeStart和strokeEnd的位置，有效值为0～1

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> checkStrokeStart     = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.038</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> checkStrokeEnd       = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.195</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> circleStrokeStart    = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.28</span>;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> circleStrokeEnd      = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

4.3.2 创建CABasicAnimation strokeStart和strokeEnd，为什么 @”strokeStart”和@”strokeEnd”能创建动画，官方文档上说了，这两个属性是Animation的，可以创建动画的，建议大家看看CAShapeLayer的官方文档，不长，而且容易看懂。

strokeStart.toValue 动画的最终位置 
strokeStart.duration 动画之行的时长 
strokeStart.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.25 :0.4 :0.3 :1.6];动画的步速 
这是一种通过贝塞尔曲线的方式来调整速度的方式，比如先快后慢，或者先慢后快。看下面的文章就容易理解了。 
参考文章 
http://netcetera.org/camtf-playground.html 
https://isux.tencent.com/ios-easing-tween-animation.html

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">@synthesize showCheck = _showCheck<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>- (void)setShowCheck:(BOOL)showCheck{    _showCheck = showCheck<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    CABasicAnimation *strokeStart = [CABasicAnimation animationWithKeyPath:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeStart"</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    CABasicAnimation *strokeEnd = [CABasicAnimation animationWithKeyPath:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"strokeEnd"</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    if (self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.showCheck</span>) {        strokeStart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = [NSNumber numberWithFloat:checkStrokeStart]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeStart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeStart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.3</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.6</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeEnd<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = [NSNumber numberWithFloat:checkStrokeEnd]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeEnd<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeEnd<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.15</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.6</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.6</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    }else{        strokeStart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = [NSNumber numberWithFloat:circleStrokeStart]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeStart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeStart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span> :-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.4</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.58</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.88</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeEnd<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> = [NSNumber numberWithFloat:circleStrokeEnd]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeEnd<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.duration</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.55</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>        strokeEnd<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.timingFunction</span> = [CAMediaTimingFunction functionWithControlPoints:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.25</span> :-<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.08</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.64</span> :<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.1</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    }    [checkShapeLayer ocb_applyAnimation:strokeStart]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    [checkShapeLayer ocb_applyAnimation:strokeEnd]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li></ul>

在CALayer的基础上扩展的一个方法， 
animation.fromValue = [self.presentationLayer valueForKey:animation.keyPath];从动画演示层presentationLayer 获取之前的状态，并且设定为fromValue 
再设定toValue，和animation开始执行动画

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (void)ocb_applyAnimation:(CABasicAnimation *)animation{    if (animation<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fromValue</span> == nil) {        animation<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.fromValue</span> = [self<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.presentationLayer</span> valueForKey:animation<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    }    [self addAnimation:animation forKey:animation<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>    [self setValue:animation<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.toValue</span> forKey:animation<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.keyPath</span>]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li></li></ul>