前言
我們平時(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在勻速上升，一直到π；前半段中圓弧不斷變長(zhǎng)，最后形成一個(gè)3/4的圓。
后半段: 從π到1.5π，這一段運(yùn)動(dòng)速度較慢；StartAngle開始變化，從-0.5π變化到1.5π；EndAngle從π變化到1.5π，最后StartAngle和EndAngle重合于1.5π；后半段中圓弧不斷變長(zhǎng)，最后直至消失。
二、實(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來(lái)完成
_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)度增長(zhǎng)的快慢有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)畫比較簡(jiǎn)單，是利用貝塞爾曲線畫弧的功能。再利用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{ //外切圓的邊長(zhǎng) 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];}源碼下載：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
