iOS中如何实现支付宝支付打钩动画-创新互联
小编给大家分享一下iOS中如何实现支付宝支付打钩动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
前言
效果如下：
支付宝支付动画
一、动画解析
为了方便观察，放慢了动画的速度并添加辅助线：
放慢后的动画
从图中可以看出：加载圆弧运动轨迹可分为前半段和后半段；并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化；
前半段: 从-0.5π到π，这一段运动中速度较快；StartAngle不变，始终未-0.5π；EndAngle在匀速上升，一直到π；前半段中圆弧不断变长，最后形成一个3/4的圆。
后半段: 从π到1.5π，这一段运动速度较慢；StartAngle开始变化，从-0.5π变化到1.5π；EndAngle从π变化到1.5π，最后StartAngle和EndAngle重合于1.5π；后半段中圆弧不断变长，最后直至消失。
二、实现代码
1、初始化一些全局属性
{
//刷新工具
CADisplayLink *_link;
//显示圆环
CAShapeLayer *_animationLayer;
//起始角度
CGFloat _startAngle;
//结束角度
CGFloat _endAngle;
//当前动画进度
CGFloat _progress;
}2、界面刷新工作由CADisplayLink来完成
_link = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)]; [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode]; _link.paused = true;
为了实现前半段和后半段的速度区别，定义了一个速度方法：
-(CGFloat)speed{
if (_endAngle > M_PI) {
return 0.1/60.0f;
}
return 0.8/60.0f;
}通过CADisplayLink刷新进度，进度增长的快慢有speed决定：
-(void)displayLinkAction{
_progress += [self speed];
if (_progress >= 1) {
_progress = 0;
}
[self updateAnimationLayer];
}刷新贝塞尔曲线的StartAngle和EndAngle实现曲线的运动：
-(void)updateAnimationLayer{
_startAngle = -M_PI_2;
_endAngle = -M_PI_2 +_progress * M_PI * 2;
if (_endAngle > M_PI) {
CGFloat progress1 = 1 - (1 - _progress)/0.25;
_startAngle = -M_PI_2 + progress1 * M_PI * 2;
}
CGFloat radius = _animationLayer.bounds.size.width/2.0f - lineWidth/2.0f;
CGFloat centerX = _animationLayer.bounds.size.width/2.0f;
CGFloat centerY = _animationLayer.bounds.size.height/2.0f;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(centerX, centerY) radius:radius startAngle:_startAngle endAngle:_endAngle clockwise:true];
path.lineCapStyle = kCGLineCapRound;
_animationLayer.path = path.CGPath;
}支付完成动画解析
为了方便观察，放慢了动画的速度，并添加辅助线：
原理分析
通过上图可知，支付完成的动画由两部分组成：圆环动画 + 对号动画
三、代码实现
1、圆环动画
这个动画比较简单，是利用贝塞尔曲线画弧的功能。再利用CAShapeLayer的strokeEnd属性加上核心动画实现的圆环动画。
-(void)circleAnimation{
//显示图层
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.frame = _animationLayer.bounds;
[_animationLayer addSublayer:circleLayer];
circleLayer.fillColor = [[UIColor clearColor] CGColor];
circleLayer.strokeColor = BlueColor.CGColor;
circleLayer.lineWidth = lineWidth;
circleLayer.lineCap = kCALineCapRound;
//运动路径
CGFloat lineWidth = 5.0f;
CGFloat radius = _animationLayer.bounds.size.width/2.0f - lineWidth/2.0f;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:circleLayer.position radius:radius startAngle:-M_PI/2 endAngle:M_PI*3/2 clockwise:true];
circleLayer.path = path.CGPath;
//执行动画
CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
checkAnimation.duration = circleDuriation;
checkAnimation.fromValue = @(0.0f);
checkAnimation.toValue = @(1.0f);
checkAnimation.delegate = self;
[checkAnimation setValue:@"checkAnimation" forKey:@"animationName"];
[circleLayer addAnimation:checkAnimation forKey:nil];
}2、对号动画
对号动画是利用了贝塞尔曲线的画线特性，设置了两段曲线拼接成了一个对号。如上图所示对号由线段AB和线段BC拼接完成，然后再利用核心动画和CAShapeLayer的strokeEnd属性实现对号动画。
-(void)checkAnimation{
//外切圆的边长
CGFloat a = _animationLayer.bounds.size.width;
//设置三个点 A、B、C
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(a*2.7/10,a*5.4/10)];
[path addLineToPoint:CGPointMake(a*4.5/10,a*7/10)];
[path addLineToPoint:CGPointMake(a*7.8/10,a*3.8/10)];
//显示图层
CAShapeLayer *checkLayer = [CAShapeLayer layer];
checkLayer.path = path.CGPath;
checkLayer.fillColor = [UIColor clearColor].CGColor;
checkLayer.strokeColor = BlueColor.CGColor;
checkLayer.lineWidth = lineWidth;
checkLayer.lineCap = kCALineCapRound;
checkLayer.lineJoin = kCALineJoinRound;
[_animationLayer addSublayer:checkLayer];
//执行动画
CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
checkAnimation.duration = checkDuration;
checkAnimation.fromValue = @(0.0f);
checkAnimation.toValue = @(1.0f);
checkAnimation.delegate = self;
[checkAnimation setValue:@"checkAnimation" forKey:@"animationName"];
[checkLayer addAnimation:checkAnimation forKey:nil];
}以上是“iOS中如何实现支付宝支付打钩动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站标题：iOS中如何实现支付宝支付打钩动画-创新互联
本文链接：http://cdiso.cn/article/ppeds.html
