iOS CoreAnimation教程 第二篇

今天主要讲解图层的strokeStart strokeEnd 属性。

strokeStart strokeEnd两个属性的默认值都是0-1 ，值的大小大概意思是描述了有多少路径画完。想象下你小时候写英文时候一笔下来的过程，下面会用动画描述生成的过程。

一般这两个属性会结合CAShaperLayer使用，看两个效果。

具体代码实现

    UIBezierPath *rectanglePath = [UIBezierPath bezierPath];
    
  //这个是第二个效果
    [rectanglePath moveToPoint:CGPointMake(0, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
    [rectanglePath closePath];

    //这个是第一个效果
//    [rectanglePath moveToPoint:CGPointMake(185, 177)];
//    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
//    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
//    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
//    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
//    [rectanglePath closePath];

    CAShapeLayer * rectangle = [CAShapeLayer layer];
    rectangle.frame       = CGRectMake(83, 206, 185, 177);
    rectangle.fillColor   = [UIColor colorWithRed:0.937 green: 0.431 blue:0.268 alpha:1].CGColor;
    rectangle.strokeColor = [UIColor colorWithRed:0.129 green: 0.151 blue:0.404 alpha:1].CGColor;
    rectangle.lineWidth   = 8;
    rectangle.strokeStart = 0.4;
    rectangle.strokeEnd   = 1;
    rectangle.path        = rectanglePath.CGPath;
    [self.view.layer addSublayer:rectangle];

代码大概解释如下：

1. 用贝塞尔曲线生成一个路径，注意这个路径坐标Y轴是向下的。
2. 用CAShaperLayer创建一个图层依据刚才的路径，并设置坐标，填充色，边框色，边框的粗细。
3. 最后添加到layer上。

但是为什么效果不一样呢？这个就是注意地方：

strokeStart strokeEnd这两个属性默认strokeStart 是0，strokeEnd是1。这个属性的效果和贝塞尔曲线生成开始的点的位置有关， 方向是逆时针方向。也就是你自己用铅笔画一个矩形的正笔画和倒笔画，同样都是生成矩形，但是效果却不一样。

具体做一个动画来解释

    UIBezierPath *rectanglePath = [UIBezierPath bezierPath];
    
    //    [rectanglePath moveToPoint:CGPointMake(0, 177)];
    //    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
    //    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
    //    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
    //    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
    //    [rectanglePath closePath];
    
    [rectanglePath moveToPoint:CGPointMake(185, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 0)];
    [rectanglePath addLineToPoint:CGPointMake(0, 177)];
    [rectanglePath addLineToPoint:CGPointMake(185, 177)];
    [rectanglePath closePath];
    
    CAShapeLayer * rectangle = [CAShapeLayer layer];
    rectangle.frame       = CGRectMake(83, 206, 185, 177);
    rectangle.fillColor   = [UIColor colorWithRed:0.937 green: 0.431 blue:0.268 alpha:1].CGColor;
    rectangle.strokeColor = [UIColor colorWithRed:0.129 green: 0.151 blue:0.404 alpha:1].CGColor;
    rectangle.lineWidth   = 8;
    rectangle.strokeStart = 0;
    rectangle.strokeEnd   = 1;
    rectangle.path        = rectanglePath.CGPath;
    [self.view.layer addSublayer:rectangle];
    
    //做动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    
    animation.fromValue = [NSNumber numberWithFloat:0];
    animation.toValue = [NSNumber numberWithFloat:1];
    animation.duration = 1.5;
    
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = false;
    
    [rectangle addAnimation:animation forKey:@"drawLineAnimation"];

在图层上加了一个动画描述了路径的生成过程，下面看效果图对比贝塞尔曲线点位置不同影响的结果。