使用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。