- 欢迎同样喜欢动效的工程师/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>