說明：動畫只是一個對layer的過程按幀顯示，事實(shí)上frame是一次變化的
原理：使用UIBezierPath創(chuàng)建路徑（一個整圓）＋CAShapeLayer的strokeEnd屬性 （結(jié)束點(diǎn)＋動畫）-->得到動畫畫圈效果
1、屬性說明
CAShapeLayer.h
@property CGFloat strokeStart;//畫圈起點(diǎn)，默認(rèn)0，支持動畫
@property CGFloat strokeEnd;//畫圈結(jié)束點(diǎn)，默認(rèn)1，支持動畫
2、代碼部分（屬性顯示：不帶動畫）
CAShapeLayer?*shapeLayer?=?[CAShapeLayer?layer];
shapeLayer.frame?=?_demoView.bounds;
shapeLayer.strokeEnd?=?0.7f;//結(jié)束點(diǎn)
shapeLayer.strokeStart?=?0.1f;//開始點(diǎn)
//得到路徑
UIBezierPath?*path?=?[UIBezierPath?bezierPathWithOvalInRect:_demoView.bounds];
shapeLayer.path?=?path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor; //Layer 的填充色
shapeLayer.lineWidth?=?2.0f;//寬度
shapeLayer.strokeColor?=?[UIColor?redColor].CGColor;//邊框色
//將CAShaperLayer放到某個層上顯示
[_demoView.layer?addSublayer:shapeLayer];
我們通過以上代碼設(shè)置：strokeStart=0.1f; strokeEnd=0.7f
3、實(shí)現(xiàn)圓形進(jìn)度條的實(shí)現(xiàn)代碼（動畫）
CAShapeLayer?*shapeLayer?=?[CAShapeLayer?layer];
shapeLayer.frame?=?_demoView.bounds;
UIBezierPath?*path?=?[UIBezierPath?bezierPathWithOvalInRect:_demoView.bounds];
shapeLayer.path?=?path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;//Layer 的填充色
shapeLayer.lineWidth = 2.0f;//寬度
shapeLayer.strokeColor = [UIColor redColor].CGColor;//邊框色
[_demoView.layer?addSublayer:shapeLayer];
CABasicAnimation?*pathAnima?=?[CABasicAnimation?animationWithKeyPath:@"strokeEnd"];
pathAnima.duration?=?3.0f;//動畫時間
pathAnima.timingFunction?=?[CAMediaTimingFunction?functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue?=?[NSNumber?numberWithFloat:0.0f];//開始點(diǎn)
pathAnima.toValue?=?[NSNumber?numberWithFloat:1.0f];//結(jié)束點(diǎn)
pathAnima.fillMode?=?kCAFillModeForwards;
pathAnima.removedOnCompletion?=?NO;
[shapeLayer?addAnimation:pathAnima?forKey:@"strokeEndAnimation"];
我們通過以上代碼設(shè)置：strokeStart=0.1f; strokeEnd=1.0f，帶動畫效果
CABasicAnimation的“轉(zhuǎn)圈”動畫
1、確定動畫軌跡
CGFloat w = CGRectGetWidth(frame);
CGFloat h = CGRectGetHeight(frame);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(w/2, h/2)radius:MIN(w, h)/2 startAngle:-M_PI_2 ?endAngle:3 * M_PI_2 ?clockwise:YES];
2、創(chuàng)建動畫
// 倒計(jì)時的時間
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
animation.duration = 3;
animation.fromValue = @(0.f);
animation.toValue = @(1.f);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeBoth;
3、CAShapeLayer添加動畫
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor colorWithRed:0.02f green:0.69f blue:1.00f alpha:1.00f].CGColor;
shapeLayer.lineWidth = 1.0;
[self.layer addSublayer:shapeLayer];
shapeLayer.path = path.CGPath;
[shapeLayer addAnimation:animation forKey:nil];
CABasicAnimation使用總結(jié)，UIBezierPath介紹, CAAnimation——基本動畫，關(guān)鍵幀動畫和貝塞爾路徑
學(xué)無止境，做個記錄
2017-01-12-SXH
