iOS动画－支付宝支付动画

最近在研究iOS动画方面的知识，尝试着做一个支付宝支付过程中的一个动画，效果图如下：

支付动画

支付流程开始的时候开启动画，中间不停循环动画过程，一旦支付成功，启动打勾动画，整个流程结束。
这里动画分为三个部分，第一部分绘制一个圆弧，第二部分为擦除上一个圆弧，第三部分为绘制一个打勾图形。第一、二部分动画做repeat，当支付成功（我这里是点击支付成功按钮）时，这两个动画停止，开启打勾动画。看代码：

//先画一个圆圈的路径
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                          radius:30.f
                                                      startAngle:M_PI * 3 / 2
                                                        endAngle:M_PI * 7 / 2
                                                       clockwise:YES];
//利用CAShapeLayer来按照指定的path绘制图形
_alipayLayer = [CAShapeLayer layer];
_alipayLayer.path = circlePath.CGPath;
_alipayLayer.lineWidth = 3.f;
_alipayLayer.fillColor = [UIColor clearColor].CGColor;
_alipayLayer.strokeColor = RGBA(5, 154, 227, 1).CGColor;
[self.view.layer addSublayer:_alipayLayer];

//让圆形动画起来
//顺时针慢慢显示圆弧
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.fromValue = @0;
drawAnimation.toValue = @1;
drawAnimation.duration = 2.f;
drawAnimation.fillMode = kCAFillModeForwards;
drawAnimation.removedOnCompletion = YES;

//顺时针慢慢擦除圆弧
CABasicAnimation *dismissAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
dismissAnimation.fromValue = @0;
dismissAnimation.toValue = @1;
dismissAnimation.duration = 2.f;
dismissAnimation.beginTime = 2.f;   //两个动画加入动画组，要按顺序播放，这个动画需要等上一个动画结束再开始
dismissAnimation.removedOnCompletion = YES;

这里有两个动画，这两个动画是一组，需要重复，所以我们把他们加入一个动画组：

CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[drawAnimation, dismissAnimation];
group.duration = 4;
group.repeatCount = INFINITY;
group.removedOnCompletion = YES;
[_alipayLayer addAnimation:group forKey:@"DrawCircleAnimationKey"];

需要注意的是：我们的第二个动画dismissAniamtion需要指定开始时间，否则两个动画同时启动会看不到动画效果。OK，我们的工作已经完成一半了，接下来做打勾动画：

UIBezierPath *tickPath = [UIBezierPath bezierPath];
[tickPath moveToPoint:CGPointMake(130, 150)];
[tickPath addLineToPoint:CGPointMake(145, 165)];
[tickPath addLineToPoint:CGPointMake(170, 140)];

CAShapeLayer *tickLayer = [CAShapeLayer layer];
tickLayer.path = tickPath.CGPath;
tickLayer.fillColor = [UIColor clearColor].CGColor;
tickLayer.strokeColor = RGBA(5, 154, 227, 1).CGColor;
tickLayer.lineWidth = 3.f;
[self.view.layer addSublayer:tickLayer];

CABasicAnimation *tickAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
tickAnimation.fromValue = @0;
tickAnimation.toValue = @1;
tickAnimation.duration = 2.f;
[tickLayer addAnimation:tickAnimation forKey:@"TickAnimationKey"];

在开始这个动画前需要停止圆弧的动画，停止动画苹果推荐的做法是直接设置speed为0（参考地址），所以我们在上面这段代码前加入

//停止圆弧动画
_alipayLayer.speed = 0;

到这，整个的动画效果就完成了！