模仿支付宝支付成功的动画，美工给了一张有对号的图片资源，感觉显示一张图片用户体验不好，看下最终的效果吧！

原理阐述

该动画有两部分组成，一部分是绘制圆环，一部分是对勾。

一。绘制圆，

首先确定圆的起始位置和结束位置。根据数学坐标系，设置起始位置为M_PI*3/2，结束位置为M_PI*7/2。可以开始画圆了！！

二。绘制对勾。

首先确定对勾三个点的坐标位置。

图片有点丑莫见怪！能算对才是王道。该图radius =88，确定三个点分别到x轴和到Y轴的距离。

第一个点坐标（48，88），以半径为单位，48/radius =0.45,88/radius = 1.0,

转化后的坐标(radius*0.45,

radius*1.0)，同理其他转化后坐标为(radius*0.84,

radius*1.32)，(radius*1.48,

radius*0.68)。

三个点的坐标确定，就可以绘图了！！

绘制动画代码（oc）

一.添加一个点击事件

-(void)wouldToHome{

UIView*viewMark = [[UIView alloc]init];

viewMark.bounds=CGRectMake(0, 0, 50,

50);

viewMark.center=CGPointMake(self.view.center.x,80);

[selfshowAnimationIPay:viewMark];

[self.viewaddSubview:viewMark];

}

二.绘图

#pragma mark -- animation

#define

LineWidthScale1.0//设置线宽度比例

-(void)showAnimationIPay:(UIView*)view{

CGSizesize = view.frame.size;

CGFloatradius=(size.height>size.width?size.width:size.height)/2.0;

CGFloatlineW= radius*LineWidthScale/10;

//画圈

UIBezierPath*circlePath =[UIBezierPath

bezierPathWithArcCenter:CGPointMake(radius,radius)radius:radiusstartAngle:M_PI*3/2endAngle:M_PI*7/2clockwise:YES];

circlePath.lineCapStyle =

kCGLineCapRound;

circlePath.lineJoinStyle =

kCGLineCapRound;

//对勾

UIBezierPath*linePath = [UIBezierPath bezierPath];

[linePathmoveToPoint:CGPointMake(radius*0.45,radius*1.0)];

[linePathaddLineToPoint:CGPointMake(radius*0.84,radius*1.32)];

[linePathaddLineToPoint:CGPointMake(radius*1.48,radius*0.68)];

[circlePathappendPath:linePath];

CAShapeLayer*shapeLyer =[CAShapeLayer layer];

shapeLyer.path=circlePath.CGPath;

shapeLyer.strokeColor = [UIColor

colorWithRed:0/255.0green:194/255.0blue:79/255.0alpha:1.0].CGColor;

shapeLyer.fillColor= [[UIColor clearColor] CGColor];

shapeLyer.lineWidth=lineW;

shapeLyer.strokeStart= 0.0;

shapeLyer.strokeEnd= 0.0;

[view.layer

addSublayer:shapeLyer];

//动画

CABasicAnimation*animation =[CABasicAnimation

animationWithKeyPath:@"strokeEnd"];

if(shapeLyer.strokeEnd== 1.0) {

[animationsetFromValue:@1.0];

[animationsetToValue:@0.0];

}else{

[animationsetFromValue:@0.0];

[animationsetToValue:@1.0];

}

[animationsetDuration:1.0];

animation.fillMode=kCAFillModeForwards;

animation.removedOnCompletion=NO;

//如果在动画结束后需要做操作的话，设置动画代理

animation.delegate=self;

[shapeLyeraddAnimation:animation

forKey:@"animationKey"];

}

#pragma mark ==

CAAnimationDelegate

//需要设置代理< CAAnimationDelegate

>

- (void)animationDidStop:(CAAnimation*)anim finished:(BOOL)flag{

//动画结束后做的操作

}

以下是swift版

var aview: UIView!

aview = UIView()

aview.frame = CGRect(x:64, y:64, width:100, height: 100)

self.view.addSubview(aview)

aview.backgroundColor = UIColor.clear

let radius:CGFloat = aview.frame.size.width / 2.0

//画一个圆

let bezier = UIBezierPath()

let point = aview.center

print(point)

bezier.addArc(withCenter: CGPoint(x:radius, y:radius), radius:radius, startAngle: CGFloat(0), endAngle: CGFloat(M_PI) * 2,clockwise: true)

bezier.lineCapStyle = .round

bezier.lineJoinStyle = .round

//画一个对号

let linePath = UIBezierPath()

linePath.move(to: CGPoint(x:radius*0.45, y:radius*1.0))

linePath.addLine(to: CGPoint(x:radius*0.84, y:radius*1.32))

linePath.addLine(to: CGPoint(x:radius*1.48, y:radius*0.68))

bezier.append(linePath)

//创建一个 layer

let layer = CAShapeLayer()

layer.path = bezier.cgPath

layer.fillColor = UIColor.clear.cgColor

layer.strokeColor = UIColor.green.cgColor

layer.lineWidth = 2.5

aview.layer.addSublayer(layer);

//创建一个动画

let animation = CABasicAnimation()

animation.duration = 1.2;

animation.keyPath = "strokeEnd";

animation.fromValue = 0

animation.toValue = 1

//animation.repeatCount = MAXFLOAT

animation.fillMode = kCAFillModeForwards;

animation.isRemovedOnCompletion = false;

layer.add(animation, forKey: "strokeEnd")