快捷導(dǎo)航

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

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

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

前言

我們平時(shí)在用支付寶付款時(shí)，會(huì)有一個(gè)支付中的動(dòng)畫和一個(gè)支付完成的動(dòng)畫。這篇博客主要分析一下這種動(dòng)畫效果，效果如下：

支付寶支付動(dòng)畫

一、動(dòng)畫解析

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

放慢后的動(dòng)畫

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

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

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

二、實(shí)現(xiàn)代碼

1、初始化一些全局屬性

{
 //刷新工具
 CADisplayLink *_link;
 //顯示圓環(huán)
 CAShapeLayer *_animationLayer;
 //起始角度
 CGFloat _startAngle;
 //結(jié)束角度
 CGFloat _endAngle;
 //當(dāng)前動(dòng)畫進(jìn)度
 CGFloat _progress;
}

2、界面刷新工作由CADisplayLink來完成

 _link = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction)];
 [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
 _link.paused = true;

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

-(CGFloat)speed{
 if (_endAngle > M_PI) {
  return 0.1/60.0f;
 }
 return 0.8/60.0f;
}

通過CADisplayLink刷新進(jìn)度，進(jìn)度增長的快慢有speed決定：

-(void)displayLinkAction{
 _progress += [self speed];
 if (_progress >= 1) {
  _progress = 0;
 }
 [self updateAnimationLayer];
}

刷新貝塞爾曲線的StartAngle和EndAngle實(shí)現(xiàn)曲線的運(yùn)動(dòng)：

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

支付完成動(dòng)畫解析

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

原理分析

通過上圖可知，支付完成的動(dòng)畫由兩部分組成：圓環(huán)動(dòng)畫 + 對(duì)號(hào)動(dòng)畫

三、代碼實(shí)現(xiàn)

1、圓環(huán)動(dòng)畫

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

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

 //運(yùn)動(dòng)路徑
 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í)行動(dòng)畫
 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、對(duì)號(hào)動(dòng)畫

對(duì)號(hào)動(dòng)畫是利用了貝塞爾曲線的畫線特性，設(shè)置了兩段曲線拼接成了一個(gè)對(duì)號(hào)。如上圖所示對(duì)號(hào)由線段AB和線段BC拼接完成，然后再利用核心動(dòng)畫和CAShapeLayer的strokeEnd屬性實(shí)現(xiàn)對(duì)號(hào)動(dòng)畫。

-(void)checkAnimation{

 //外切圓的邊長
 CGFloat a = _animationLayer.bounds.size.width;
 //設(shè)置三個(gè)點(diǎn) 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í)行動(dòng)畫
 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地址

本地下載

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: