iOS 做一个圆形渐变旋转圆环

实现一个如下的动画:

旋转.gif

实现如果的动画方式大概有两种:

1.直接找一个GIF图片进行播放(最直接)

2.自己用代码绘制然后加上动画
第一种方式参考:播放GIF的几种方式

下面主要说一下第二种方式

代码主要用到:
CALayer+UIBezierPath+CAShapeLayer+CAGradientLayer+CABasicAnimation
1.创建一个图层

    _layer = [CALayer layer];
    _layer.frame = CGRectMake(100, 100, 110, 110);
    _layer.backgroundColor = [UIColor blueColor].CGColor;

效果如下:

图层.png

2.绘制一个路径,再生成一个背景圆环加到view上

//创建圆环
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 55) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
//圆环遮罩
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 1;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.lineDashPhase = 0.8;
    shapeLayer.path = bezierPath.CGPath;
    [_layer setMask:shapeLayer];

效果如下:

圆环.png

3.利用CAGradientLayer绘制渐变的颜色
由于CAGradientLayer是坐标到坐标之间的渐变,需要什么效果需要自己定制
渐变成坐标如下:

坐标.png

//颜色渐变
    NSMutableArray *colors = [NSMutableArray arrayWithObjects:(id)[UIColor blueColor].CGColor,(id)[RYUIColorWithRGB(255, 255, 255, 0.5) CGColor], nil];
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.shadowPath = bezierPath.CGPath;
    gradientLayer.frame = CGRectMake(0, 0, 110, 55);
    gradientLayer.startPoint = CGPointMake(1, 0);
    gradientLayer.endPoint = CGPointMake(0, 0);
    [gradientLayer setColors:[NSArray arrayWithArray:colors]];
    
    NSMutableArray *colors1 = [NSMutableArray arrayWithObjects:(id)[RYUIColorWithRGB(255, 255, 255, 0.5) CGColor],(id)[[UIColor whiteColor] CGColor], nil];
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.shadowPath = bezierPath.CGPath;
    gradientLayer1.frame = CGRectMake(0, 55, 110, 55);
    gradientLayer1.startPoint = CGPointMake(0, 1);
    gradientLayer1.endPoint = CGPointMake(1, 1);
    [gradientLayer1 setColors:[NSArray arrayWithArray:colors1]];
    [_layer addSublayer:gradientLayer]; //设置颜色渐变
    [_layer addSublayer:gradientLayer1];

效果如下

jianbian.png

最后效果图如下

jianbianhou.png

4.利用CABasicAnimation实现简单的旋转

- (void)animation {
    //动画
    CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.fromValue = [NSNumber numberWithFloat:0];
    rotationAnimation.toValue = [NSNumber numberWithFloat:2.0*M_PI];
    rotationAnimation.repeatCount = MAXFLOAT;
    rotationAnimation.duration = 1;
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [_layer addAnimation:rotationAnimation forKey:@"rotationAnnimation"];
}

这样我们就简单实现了圆形渐变旋转圆环.
我们可以根据需求设置不同的颜色,在开发中我是由白色到无色本来利用whiteColor到clearColor发现底色会变灰可能clear颜色比较特殊,后来只好根据alpha来改变.

参考资料:
iOS弧形渐变进度条原理实现分析
 CAGradientLayer讲解
 iOS 环形渐变进度条实现
 iOS Core Animation 更加细致讲解

iOS 做一个圆形渐变旋转圆环

推荐阅读更多精彩内容