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

iOS 渐变色实现,渐变色圆环,圆环进度条的更多相关文章

  1. ios swift 实现饼状图进度条,swift环形进度条

    ios swift 实现饼状图进度条 // // ProgressControl.swift // L02MyProgressControl // // Created by plter on 7/2 ...

  2. IOS中公布应用程序,进度条一直不走怎么处理

    在IOS中公布应用程序非常是喜闻乐见. 近期1周.我更新了6次版本号.可是时不时的会卡住,进度条不走. 最后总结了几个原因. 1.在公布前你要确认自己的证书是否配置正确 2.DNS域名server有没 ...

  3. ios - 带动画圆形旋转的进度条

    #import <UIKit/UIKit.h> @interface TJCircleProgressView : UIView /** * 图标 */ @property(nonatom ...

  4. iOS WKWebView添加网页加载进度条(转)

    一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...

  5. vue实用组件——圆环百分比进度条

    因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...

  6. iOS 自定义任意形状加载进度条(水波纹进度条)

    1. 项目中要做类似下面的加载动画: 先给出安卓的实现方式 2.iOS的实现方式参考了下面两位的,感谢. 以任意底部图片为背景的加载动画 和 水波纹动画 最后附上自己的demo

  7. iOS UIWebView加载时添加进度条

    标注:此框架仅适合UIWebView  对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...

  8. iOS UIWebView加载时添加进度条01

    标注:此框架仅适合UIWebView  对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...

  9. H5 可堆叠的圆环进度条,支持任意数量子进度条

    by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...

  10. iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

随机推荐

  1. Spfa【p3385】【模板】负环(spfa)

    顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述 毒瘤数据要求判负环 分析: 还是融合了不少题解的思想的. 负环定义: 权值和为负的环 //在网络上并没有找到一个官方定义,暂且这么理解. ...

  2. iOS开发 Swift开发数独游戏(三) 选关界面

    一.选关界面涉及到的功能点 1)需要UITableView以及相应数据代理.协议的实现 2)读取plist文件并转化成模型 3)在单元格点击后进入数独游戏,涉及到把数据经segue在UIViewCon ...

  3. maven依赖包下载失败解决办法

    原文:http://www    .zuidaima.com/question/2535347150441472.htm maven依赖包下载失败 比如:Missing artifact org.co ...

  4. apache的动态和静态

    apache的动态和静态  http://www.cnblogs.com/eoiioe/archive/2008/12/23/1360476.html(2.0和2.2一样) 关于apache的动态与静 ...

  5. ~/.bash_profile介绍

    mac和linux终端一般用bash来进行解析.当bash在读完了整体环境变量的/etc/profile并借此调用其他配置文件后,接下来则是会读取用户自定义的个人配置文件.bash读取的文件总共有三种 ...

  6. tomcat修改默认访问首页

    找到conf下server.xml文件修改如下位置内容 <Host name="localhost" appBase="webapps" unpackWA ...

  7. postman(一)批量执行接口测试用例

    postman(一)批量执行接口测试用例 学习了:https://blog.csdn.net/github_36032947/article/details/78611405 还可以把collecti ...

  8. Json序列化为对象方法

    /// <summary>/// json 序列化为对象/// </summary>/// <typeparam name="T">对象类型&l ...

  9. EffectiveJava(11)Java中的clone

    java中的clone clone构造器及其静态工厂的变形 优点:它们不依赖于某一种很有风险的,语言之外的对象创建机制; 它们不要求遵守尚未制定好文档的规范 他们不会于final域的正常使用发生冲突 ...

  10. 自定义ViewPager的兼容性问题及解决办法

    通过它我们可以给图片增加组合动画效果,也可以写成一个图片查看器. 比如我们首次安装应用的时候,很多就会用到ViewPager给我们做一个应用简介.今天要写的也是这个--怎么用ViewPager实现动画 ...