上一篇博客分析了支付中動畫的實(shí)現(xiàn)，本篇博客是分析支付完成的動畫。

支付寶支付動畫

一、動畫解析

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

原理分析

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

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

1、圓環(huán)動畫

這個動畫比較簡單，是利用貝塞爾曲線畫弧的功能。再利用CAShapeLayer的strokeEnd屬性加上核心動畫實(shí)現(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;
    
    //運(yùn)動路徑
    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、對號動畫

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

-(void)checkAnimation{
    
    //外切圓的邊長
    CGFloat a = _animationLayer.bounds.size.width;
    //設(shè)置三個點(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í)行動畫
    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