iOS動畫解析之支付寶支付打鉤動畫的實現(xiàn)方法

更新時間：2017年11月04日 15:57:14 作者：孟憲亮

支付寶支付打鉤動畫相信對大家來說都不陌生，這篇文章主要給大家介紹了關于iOS動畫解析之支付寶支付動畫的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對各位iOS開發(fā)者們具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

我們平時在用支付寶付款時，會有一個支付中的動畫和一個支付完成的動畫。這篇博客主要分析一下這種動畫效果，效果如下：

支付寶支付動畫

一、動畫解析

為了方便觀察，放慢了動畫的速度并添加輔助線：

放慢后的動畫

從圖中可以看出：加載圓弧運動軌跡可分為前半段和后半段；并且圓弧的起始角度(StartAngle)和結束角度(EndAngle)在做有規(guī)律的變化；

前半段: 從-0.5π到π，這一段運動中速度較快；StartAngle不變，始終未-0.5π；EndAngle在勻速上升，一直到π；前半段中圓弧不斷變長，最后形成一個3/4的圓。

后半段: 從π到1.5π，這一段運動速度較慢；StartAngle開始變化，從-0.5π變化到1.5π；EndAngle從π變化到1.5π，最后StartAngle和EndAngle重合于1.5π；后半段中圓弧不斷變長，最后直至消失。

二、實現(xiàn)代碼

1、初始化一些全局屬性

{
 //刷新工具
 CADisplayLink *_link;
 //顯示圓環(huán)
 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;

為了實現(xiàn)前半段和后半段的速度區(qū)別，定義了一個速度方法：

-(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實現(xiàn)曲線的運動：

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

支付完成動畫解析

為了方便觀察，放慢了動畫的速度，并添加輔助線：

原理分析

通過上圖可知，支付完成的動畫由兩部分組成：圓環(huán)動畫 + 對號動畫

三、代碼實現(xiàn)

1、圓環(huán)動畫

這個動畫比較簡單，是利用貝塞爾曲線畫弧的功能。再利用CAShapeLayer的strokeEnd屬性加上核心動畫實現(xiàn)的圓環(huán)動畫。

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

 //執(zhí)行動畫
 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屬性實現(xiàn)對號動畫。

-(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];

 //執(zhí)行動畫
 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];
}

源碼下載：

Github地址

本地下載

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: