POP 绘线动画

一、总结

通过pop动画 和 timer 更改shape的strokeEnd和strokeStart。

二、实现效果

二、界面布局

布局包含以下控件：

1、动画layer

2、定时器

@property(nonatomic,strong) GCDTimer    *timer;

@property(nonatomic,strong) CAShapeLayer    *layer;

界面初始化：

CGFloat lineWidth = 3.0;

CGFloat radius    = 50;

self.layer = [CAShapeLayer layer];

self.layer.lineWidth = 3.f;

self.layer.lineCap = kCALineCapRound;

self.layer.cornerRadius = radius;

self.layer.bounds = CGRectMake(0, 0, (radius+lineWidth)*2, (radius+lineWidth)*2);

self.layer.position = self.view.center;

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(lineWidth + radius, lineWidth+radius) radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];

path.lineWidth = lineWidth;

self.layer.path = [path CGPath];

self.layer.fillColor = [UIColor clearColor].CGColor;

[self.view.layer addSublayer:self.layer];

设置定时器 （GCDTimer）

self.timer = [[GCDTimer alloc] initInQueue: [GCDQueue mainQueue]];

[self.timer event:^{

CGFloat value1 = arc4random() % 101 / 100.0f;

CGFloat value2 = arc4random() % 101 / 100.0f;

POPSpringAnimation *strokeStartAnim = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeStart];

strokeStartAnim.toValue =@(value1>value2?value2:value1);

strokeStartAnim.springBounciness = 15.f;

[self.layer pop_addAnimation:strokeStartAnim forKey:@"start"];

POPSpringAnimation *strokeEndAnim = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];

strokeEndAnim.toValue =@(value1<value2?value2:value1);

strokeEndAnim.springBounciness = 15.f;

[self.layer pop_addAnimation:strokeEndAnim forKey:@"end"];

POPSpringAnimation *bgAnim = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeColor];

bgAnim.toValue = (__bridge id)([self randomColor].CGColor);

[self.layer pop_addAnimation:bgAnim forKey:@"bg"];

} timeIntervalWithSecs:1];

[self.timer start];