iOS CAShapeLayer的strokeStart和strokeEnd属性

CAShapeLayer的strokeStart和strokeEnd属性

• 苹果官方给出这两个属性的解释为：

/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */

我们可以对绘制的Path进行分区。这两个属性的值在0~1之间，0代表Path的开始位置，1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0，strokeEnd默认值为1。这两个属性都支持动画。

1. keyPath = strokeStart 动画的fromValue = 0，toValue = 1
   表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失

2. keyPath = strokeStart 动画的fromValue = 1，toValue = 0
   表示从路径的1位置画到0 怎么画是按照清除开始的位置也就是1 这样开始的路径是空的（即都被清除掉了）一直清除到0 效果就是一条路径被反方向画出来

3. keyPath = strokeEnd 动画的fromValue = 0，toValue = 1
   表示 这里我们分3个点说明动画的顺序 strokeEnd从结尾开始清除 首先整条路径先清除后2/3，接着清除1/3 效果就是正方向画出路径

4. keyPath = strokeEnd 动画的fromValue = 1，toValue = 0
   效果就是反方向路径慢慢消失
   注释： 动画的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示执行的方向 和路径的范围。

总结一句话就是：

**
strokeStart 把一个圆先画完，然后 再慢慢减少
strokeEnd 从原点开始画，然后把圆画完整
**

代码如下，可以直接复制代码测试

/** 注释
 
 strokeStart
 strokeStartAnimation
 strokeEnd
 strokeEndAnimation
 
 strokeAnimation
 groupAnimation
 */
- (void)test_strokeStar
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = self.shapeLayer.bounds;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.shapeLayer.bounds];
    
    shapeLayer.path = path.CGPath;
    
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 2.0f;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    [self.shapeLayer addSublayer:shapeLayer];
    
    /** 注释
     strokeStart 把一个圆先画完，然后 再慢慢减少
     strokeEnd 从原点开始画，然后把圆画完整
     */

    CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    pathAnima.duration = 3.0f;
    pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    /** fromValue 0 到1 先出现一个完整的圆， 然后顺时针慢慢减少  */
//    pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
//    pathAnima.toValue = [NSNumber numberWithFloat:1.0f];

    /** fromValue 1 到0  从无到有 然后逆时针画圆  */
    pathAnima.fromValue = [NSNumber numberWithFloat:1.0f];
    pathAnima.toValue = [NSNumber numberWithFloat:0.0f];

    pathAnima.fillMode = kCAFillModeForwards;
    pathAnima.removedOnCompletion = NO;
    pathAnima.repeatCount = CGFLOAT_MAX;
    [shapeLayer addAnimation:pathAnima forKey:@"strokeStartAnimation"];
}

- (void)_teststrokeEnd
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = self.shapeLayer.bounds;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.shapeLayer.bounds];
    
    shapeLayer.path = path.CGPath;
    
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 2.0f;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    [self.shapeLayer addSublayer:shapeLayer];
    
    /** 注释
     strokeStart 把一个圆先画完，然后 再慢慢减少
     strokeEnd 从原点开始画，然后把圆画完整
     */
 
    CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnima.duration = 3.0f;
    pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    /** fromValue 0 到1 从无到有，顺时针画圆  */
    pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
    
    /** fromValue 1 到0  先出现一个完整的圆，然后逆时针慢慢减少  */
//    pathAnima.fromValue = [NSNumber numberWithFloat:1.0f];
//    pathAnima.toValue = [NSNumber numberWithFloat:0.0f];

    pathAnima.fillMode = kCAFillModeForwards;
    pathAnima.removedOnCompletion = NO;
    pathAnima.repeatCount = CGFLOAT_MAX;
    [shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
    
    
}

PS：strokeStart fromValue 0-1动画的效果如下面gif

IMG_4890.GIF

strokeEnd. fromValue 0-1 动画的效果如下面gif
动画 从无到有

IMG_4898.GIF

如何实现声音波纹的动画