模仿支付宝支付成功的动画，美工给了一张有对号的图片资源，感觉显示一张图片用户体验不好，看下最终的效果吧！
原理阐述
该动画有两部分组成，一部分是绘制圆环，一部分是对勾。
一。绘制圆，
首先确定圆的起始位置和结束位置。根据数学坐标系，设置起始位置为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")
