温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

iOS中如何实现支付宝支付打钩动画

发布时间:2021-08-04 13:39:31 来源:亿速云 阅读:133 作者:小新 栏目:移动开发

小编给大家分享一下iOS中如何实现支付宝支付打钩动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

前言

效果如下:

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;
}

支付完成动画解析

为了方便观察,放慢了动画的速度,并添加辅助线:

iOS中如何实现支付宝支付打钩动画

原理分析

通过上图可知,支付完成的动画由两部分组成:圆环动画 + 对号动画

三、代码实现

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中如何实现支付宝支付打钩动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ios
AI