前言
我們平時在用支付寶付款時，會有一個支付中的動畫和一個支付完成的動畫。這篇博客主要分析一下這種動畫效果，效果如下：
支付寶支付動畫
一、動畫解析
為了方便觀察，放慢了動畫的速度并添加輔助線：
放慢后的動畫
從圖中可以看出：加載圓弧運動軌跡可分為前半段和后半段；并且圓弧的起始角度(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];}源碼下載：
Github地址
本地下載
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
