简单彩虹动画的效果实现
我们先看下最后的效果图
1、首先我们使用UIBezierPath类画一个圆弧,使用方法
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
center 圆弧的位置
radius 圆弧的弧度
startAngle 开始的地方
endAngle 结束的地方
2、使用CAShapeLayer类给圆弧一个基础层
_progressLayer = [CAShapeLayer layer];//创建
_progressLayer.frame = self.bounds;//位置
_progressLayer.fillColor = [[UIColor clearColor] CGColor];//填充颜色
_progressLayer.strokeColor=[UIColor redColor].CGColor;//弧形颜色
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.lineWidth = PROGRESS_LINE_WIDTH;
3、使用CAGradientLayer类做一个彩虹颜色渐变的效果填充到上面
CAGradientLayer *gradient = [CAGradientLayer layer];//创建对象
gradient.frame = _progressLayer.frame;
[gradient setColors:[NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor],(id)[[UIColor redColor] CGColor], nil]];//设置颜色
[gradient setLocations:@[@0,@0.3,@0.5,@0.6,@0.8,@1]];//每种颜色最后的位置
[gradient setStartPoint:CGPointMake(0, 0)];//起始点
[gradient setEndPoint:CGPointMake(1, 0)];//结束点
[gradient setMask:_progressLayer];//截取圆弧
[self.layer addSublayer:gradient];//添加
做到这里就差不多完了。。。
再做一个动画的效果吧
4、动画我使用的是CABasicAnimation类
CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 2;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue=[NSNumber numberWithFloat:0.0f];
animation.toValue=[NSNumber numberWithFloat:1.0f];
animation.autoreverses=NO;
_progressLayer.path=path.CGPath;
[_progressLayer addAnimation:animation forKey:@"strokeEndAnimation"];
这样的话就达到了开始的图片的效果了,
写得不好的地方希望大神指点。