經(jīng)常使用支付寶結(jié)賬，發(fā)現(xiàn)支付成功后，都會(huì)有個(gè)畫圈打勾的動(dòng)畫效果伊诵，所以想著：咱也試著寫一個(gè)唄～
實(shí)現(xiàn)方案：
- 繪制一個(gè)圓圈路徑；
- 繪制一個(gè)對(duì)勾的路徑回官；
- 添加動(dòng)畫效果實(shí)現(xiàn)日戈。
使用到的技術(shù)點(diǎn)
-
CAShapeLayer; -
UIBezierPath; -
CABasicAnimation;
具體實(shí)現(xiàn)
1.路徑繪制，使用貝塞爾曲線來(lái)畫一個(gè)圓圈（注意啟示弧度和終點(diǎn)弧度的設(shè)置）孙乖，對(duì)勾可以用兩條直線來(lái)拼接浙炼，這也可以用貝塞爾曲線來(lái)畫；
//圓圈路徑
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, 200) radius:50 startAngle:M_PI * 3 / 2 endAngle:M_PI * 7 / 2 clockwise:YES];
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineCapRound; //終點(diǎn)處理
//對(duì)勾路徑
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(30, 200)];
[linePath addLineToPoint:CGPointMake(60, 220)];
[linePath addLineToPoint:CGPointMake(90, 190)];
//拼接兩個(gè)路徑
[path appendPath:linePath];
2.由于CAShapeLayer的path屬性只能賦值一個(gè)路徑唯袄，那我又兩個(gè)路徑怎么辦呢弯屈？
答案是可以使用下面方法將兩個(gè)路徑拼接起來(lái)：
// Appending paths
- (void)appendPath:(UIBezierPath *)bezierPath;
3.初始化CAShapeLayer，定義線條顏色恋拷，寬度资厉；
shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor greenColor].CGColor;//線條顏色
shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色
shapeLayer.lineWidth = 5.0;
shapeLayer.strokeStart = 0.0;
shapeLayer.strokeEnd = 0.0;
[self.view.layer addSublayer:shapeLayer];
strokeStart，strokeEnd官方文檔的解釋如下：
/* These values define the subregion of the path used to draw the
* stroked outline. The values must be in the range [0,1] with zero
* representing the start of the path and one the end. Values in
* between zero and one are interpolated linearly along the path
* length. strokeStart defaults to zero and strokeEnd to one. Both are
* animatable. */
大致意思是：用這兩個(gè)屬性來(lái)定義要繪制的路徑的區(qū)域范圍蔬顾，取值范圍為0到1宴偿，代表著路徑的開始和結(jié)束，兩個(gè)屬性默認(rèn)都是0诀豁，可以用來(lái)做一些動(dòng)畫效果窄刘。
說(shuō)的通俗點(diǎn)（翻譯成人話），這兩個(gè)值其實(shí)就是定義要繪制路徑的區(qū)域的某一段舷胜，比如strokeStart＝0娩践，strokeEnd=0.25，就代表著繪制路徑的前1/4段；同理翻伺，strokeStart＝0.75材泄，strokeEnd=1.0，就是繪制路徑的后1/4段吨岭；
4.給CAShapeLayer添加CABasicAnimation動(dòng)畫拉宗，動(dòng)畫根據(jù)strokeEnd的值的變化來(lái)進(jìn)行，動(dòng)畫結(jié)束后辣辫，由于需要保持動(dòng)畫的最后狀態(tài)（也就是strokeEnd＝1的狀態(tài)）簿废，所以需要設(shè)置：
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
if (shapeLayer.strokeEnd == 1.0)
{
[animation setFromValue:@1.0];
[animation setToValue:@0.0];
}
else
{
[animation setFromValue:@0.0];
[animation setToValue:@1.0];
}
[animation setDuration:3];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;//當(dāng)動(dòng)畫結(jié)束后,layer會(huì)一直保持著動(dòng)畫最后的狀態(tài)
animation.delegate = self;
[shapeLayer addAnimation:animation forKey:@"Circle"];
5.這樣完整的動(dòng)畫就出現(xiàn)來(lái)了，逆向動(dòng)畫的實(shí)現(xiàn)方法也很簡(jiǎn)單络它，在動(dòng)畫結(jié)束后
重新設(shè)置strokeEnd = 1.0，再進(jìn)行動(dòng)畫事件就可以了歪赢。
（具體動(dòng)畫效果見Demo）
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
if (flag)
{
if (shareLayerOne.strokeEnd == 0.25)
{
shareLayerOne.strokeEnd = 1.0;
}
else
{
shareLayerOne.strokeEnd = 0.25;
}
}
}
CAShapeLayer + UIBezierPath可以實(shí)現(xiàn)很多其它有意思的動(dòng)畫效果化戳，后面繼續(xù)研究...
Demo下載鏈接：AnimationDemo
