模仿支付寶支付成功的動畫，美工給了一張有對號的圖片資源，感覺顯示一張圖片用戶體驗(yàn)不好，看下最終的效果吧！
原理闡述
該動畫有兩部分組成，一部分是繪制圓環(huán)，一部分是對勾。
一。繪制圓，
首先確定圓的起始位置和結(jié)束位置。根據(jù)數(shù)學(xué)坐標(biāo)系，設(shè)置起始位置為M_PI*3/2，結(jié)束位置為M_PI*7/2。可以開始畫圓了！！
二。繪制對勾。
首先確定對勾三個(gè)點(diǎn)的坐標(biāo)位置。
圖片有點(diǎn)丑莫見怪！能算對才是王道。該圖radius =88，確定三個(gè)點(diǎn)分別到x軸和到Y軸的距離。
第一個(gè)點(diǎn)坐標(biāo)（48，88），以半徑為單位，48/radius =0.45,88/radius = 1.0,
轉(zhuǎn)化后的坐標(biāo)(radius*0.45,
radius*1.0)，同理其他轉(zhuǎn)化后坐標(biāo)為(radius*0.84,
radius*1.32)，(radius*1.48,
radius*0.68)。
三個(gè)點(diǎn)的坐標(biāo)確定，就可以繪圖了！！
繪制動畫代碼（oc）
一.添加一個(gè)點(diǎn)擊事件
-(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//設(shè)置線寬度比例
-(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;
//如果在動畫結(jié)束后需要做操作的話，設(shè)置動畫代理
animation.delegate=self;
[shapeLyeraddAnimation:animation
forKey:@"animationKey"];
}
#pragma mark ==
CAAnimationDelegate
//需要設(shè)置代理< CAAnimationDelegate
>
- (void)animationDidStop:(CAAnimation*)anim finished:(BOOL)flag{
//動畫結(jié)束后做的操作
}
以下是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
//畫一個(gè)圓
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
//畫一個(gè)對號
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)
//創(chuàng)建一個(gè) 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);
//創(chuàng)建一個(gè)動畫
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")
