使用facebook pop 与 CAShapeLayer 实现 画线条的动画效果

1.首先创建一个CAShapeLayer

    self.lockLineH = [CAShapeLayer layer];
    self.lockLineH.strokeColor = LockBlueColor.CGColor;
    self.lockLineH.fillColor = [[UIColor clearColor] CGColor];
    self.lockLineH.lineWidth = LockPatternLineWidth;
    self.lockLineH.strokeEnd = 0.f;
    [self.contentView.layer addSublayer:self.lockLineH];

上面设置的属性有一个重点的地方就是strokeEnd属性设置为0， 这代表在初始化之后shapeLayer被画完成的进度是0，如果设置为1则是100%

self.lockLineH.strokeEnd = 0.f;

接下来还有另一个属性需要重点设置:path, 使用UIBezierPath的这种方式来创建线条的起始点和结束点，不能使用CGPathCreateWithRect来创建一个path

    UIBezierPath *path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:CGPointMake(self.roundClick1.position.x, self.roundClick1.position.y)];
    [path1 addLineToPoint:CGPointMake(self.roundClick3.position.x, self.roundClick3.position.y)];
    <span style="font-family: Arial, Helvetica, sans-serif;">self.lockLineH.path </span>= path1.CGPath;

2. 创建一个POPBasicAnimation实例，并添加到CAShapeLayer上

    POPBasicAnimation *lockAnimationH = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
    lockAnimationH.duration = LockPatternAnimationDuration*2;
    lockAnimationH.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    lockAnimationH.fromValue = @0.f;
    lockAnimationH.toValue = @1.0f;
    [self.lockLineH pop_addAnimation:lockAnimationH forKey:@"AnimateBounds"];

这里重点是使用kPOPShapeLayerStrokeEnd这个属性进行动画，然后就是是fromValue和toValue，从0到1。