Skip to content

qqcc1388/TYGradientRingDemo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

CAGradientLayer图层可以通过设置mask来给视图添加渐变效果 CAGradientLayer主要需要设置一下几个参数 colors:传入需要渐变的颜色 例如 self.gradientLayer.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor]; 需要注意的Color格式 startPoint:渐变开始的位置 self.gradientLayer.startPoint = CGPointMake(0, 0); endPoint:渐变结束的位置 self.gradientLayer.endPoint = CGPointMake(1, 1); 我画一个坐标你立刻就明白了,中间是0.5

     (0,0) -------- (1,0)
           |        |
           |   0.5  |
           |        |
     (0,1) -------- (1,1)

CAShapeLayer 可以传入UIBezierPath曲线,这样我们可以通过UIBezierPath绘制一个圆环,通过CAGradientLayer来实现渐变效果 fillColor:填充颜色 strokeColor:绘制颜色 lineWidth:线宽 path:绘图路径(CGPath)

关于用UIBezierPath画圆 圆环 UIBezierPath bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startAngle:0 endAngle:M_PI clockwise:YES]; 这里需要注意传入的是弧度而不是角度 弧度转角度可以自行查阅资料 弧度在坐标系中的位置我这里大致画一下,方便观察开始角度和结束角度

          -M_PI_2(M_PI+M_PI_2)
                    ∧
                    |
                    |
                    |
                    |
       M_PI---------|---------->  0
                    |
                    |
                    |
                    |
                  M_PI_2

//给圆环添加渐变效果

    self.shapeLayer = [[CAShapeLayer alloc] init];
    self.shapeLayer.frame = self.bounds;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    self.shapeLayer.lineWidth = 10.f;
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width*0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startAngle:0 endAngle:M_PI clockwise:YES];
    self.shapeLayer.path = bezierPath.CGPath;

    //创建渐变层
    self.gradientLayer = [[CAGradientLayer alloc] init];
    self.gradientLayer.frame = self.bounds;
    self.gradientLayer.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor];
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(1, 1);

    self.gradientLayer.mask = self.shapeLayer;
    [self.layer addSublayer:self.gradientLayer];

更多内容参见demo:https://github.com/qqcc1388/TYGradientRingDemo

转载请标注来源:http://www.cnblogs.com/qqcc1388/p/8670620.html

About

渐变圆环 动态渐变圆环

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published