今天我们来说说CAShapeLayer的两个非常神奇的属性strokeStart和strokeEnd 我把它写成了一个Hud 老规矩 先上动图

HudDemo.gif

strokeStart

我们都知道CAShapeLayer可以通过矢量图形来绘制的CALayer子类 我们可以指定线宽啊 颜色之类的 最后通过CGPath来绘制出我们想要的图形
strokeStart它表示描线开始的地方占总路径的百分比，默认值是0 取值范围[0,1] 比如说我们起点在(0,0) 终点在(100,0) 我们设置strokeStart如果为0.5的话 那么此时起点就在(50,0) 我们做个CABasicAnimation动画 让strokeStart从0.5 到1.0的话 那么表现在动画形式上就是线越来越短 为何更好的理解 我画了一张图

strokeStart.png

虚线就是看不到的 你可以把strokeStart理解成一个橡皮擦 如果我们让strokeStart从0到1的话 那么这个线就会被从(0,0)一直檫除到(100,0)

strokeEnd

对比strokeStart 只不过它代表了绘制结束的地方站总路径的百分比 默认值是1 取值范围是[0,1] 如果小于等于strokeStart 则绘制不出任何内容

strokeEnd.png

如果我们让strokeEnd从0 动画到 1 那么动画表现为线越来越长 可以把strokeEnd理解为一个画笔

分析动画

OneAnimation.gif

首先要了解iOS贝塞尔曲线画圆的坐标系 直接上图

坐标系.png

我们可以看到这个动画分为两个动画 第一个是先画一个满圆(起点在3π/2 终点在7π/2) 第二个动画是去檫除这个圆(起点在3π/2 终点在7π/2) 结合我们上面讲的strokeStart和strokeEnd 画圆我们采用strokeEnd来做动画 让他从0动画到1 檫除圆我们选择strokeStart来做动画 让其也从0动画到1
来 先看画圆的路径代码

#pragma mark -- 获取路径
- (CGPathRef )getAnimationOnePath{
    
    // 画出这个圆的路径
    // clockwise:是否是顺时针
    // startAngle: 起始角度
    // endAngle :终点角度
    UIBezierPath *ciclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2,self.frame.size.height/2) radius:0.8*self.currentSize.width/2 startAngle:M_PI * 3 / 2 endAngle:M_PI * 7 / 2 clockwise:YES];
    return ciclePath.CGPath;
}

动画代码

#pragma mark -- 默认的动画
- (CAAnimationGroup *)AnimationOne{
    
    // 第一个满圆旋转动画
    
    CABasicAnimation *aniamtion1 = [CABasicAnimation animation];
    aniamtion1.keyPath = @"strokeEnd";
    aniamtion1.fromValue = @0;
    aniamtion1.toValue = @1;
//    aniamtion1.removedOnCompletion = YES;
    aniamtion1.duration = 1.5;
    aniamtion1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    
    // 第二个檫除路径路径动画
    CABasicAnimation *aniamtion2 = [CABasicAnimation animation];
    aniamtion2.keyPath = @"strokeStart";
    aniamtion2.fromValue = @0;
    aniamtion2.toValue = @1;
    aniamtion2.duration = 1.5;
    aniamtion2.beginTime = 1.5;
//    aniamtion1.removedOnCompletion = YES;
    aniamtion2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
 
    
    // 最后合并到动画组当前去
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations =@[aniamtion1,aniamtion2];
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    group.fillMode = kCAFillModeForwards;
    group.duration = 3;
    group.repeatCount = MAXFLOAT;
    return group;
  
}

好了我们第一个动画完成了 是不是很简单哇

对勾动画

假如我们现在要画出这个图案 大家会怎么画呢 很简单先画一个圆 然后在里面画出一个对勾 对没错 我们动画也是这么做的 我们先把路径用贝赛尔曲线画出来 最后用strokeEnd做动画就ok了

对勾.png

矩形是当前的view 1234 使我们画对勾的路径点 下面是详细代码

#pragma mark -- 成功的路径
-(CGPathRef)getSuccessPath{
    
    // 圆
    UIBezierPath *ciclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2,self.frame.size.height/2) radius:0.8*self.currentSize.width/2 startAngle:M_PI * 3 / 2 endAngle:M_PI * 7 / 2 clockwise:YES];
    // 对勾
    CGFloat W = self.frame.size.width *0.9;
    CGFloat H = self.frame.size.height*0.9;
    UIBezierPath *subPath  = [UIBezierPath bezierPath];
    [subPath moveToPoint:CGPointMake(W/4,H/2)];
    [subPath addLineToPoint:CGPointMake(W/2,(H/2)+ H/4)];
    [subPath addLineToPoint:CGPointMake(W-(W/8),H/4)];
    
    // 添加到路径上 由于CAShapeLayer只能添加一条路径  幸好贝赛尔曲线有个appendPath: 方法 可以让我们画多条路径
    [ciclePath appendPath:subPath];
    return ciclePath.CGPath;
}

最后动画部分就很简单了啊

#pragma mark -- 成功的动画
- (CABasicAnimation*)successAnimtion{
    
    // 第一个满圆旋转
    CABasicAnimation *aniamtion1 = [CABasicAnimation animation];
    aniamtion1.keyPath = @"strokeEnd";
    aniamtion1.fromValue = @0;
    aniamtion1.toValue = @1;
    aniamtion1.duration = 1.5;
    
    // 这个是缓冲函数
    // 可以自定义
    //
//    aniamtion1.timingFunction = [CAMediaTimingFunction functionWithControlPoints:1 :1 :1 :1];
    
    aniamtion1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    aniamtion1.fillMode = kCAFillModeBackwards;
    return aniamtion1;
   }

最后附上完整Demo 只要理解了这两个属性 其实动画就剩下的只是脑洞问题了 最后谢谢大家批评指正