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中如何實現支付寶支付打鉤動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！