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. Closest Binary Search Tree Value -- LeetCode

    Given a non-empty binary search tree and a target value, find the value in the BST that is closest t ...

  2. kaptcha验证码

    @Action("/validimg") public String validimg() throws Exception { genernateCaptchaImage(); ...

  3. 【微信】微信小程序 获取本次场景值

    场景值: 代表从何处进入小程序的.代表小程序的入口场景值. 注意: 1>目前仅可以在 App 的 onlaunch 和 onshow 中获取上述场景值 获取场景值的方法: //在小程序的onLa ...

  4. ASP.NET 5基础之中间件

    来源https://docs.asp.net/en/latest/fundamentals/middleware.html 一些可以整合进http请求管道的小的应用组件称做中间件.ASP.NET 5集 ...

  5. hdu1004(c++)

    字符串统计问题,统计每个字符串的次数,输出出现次数最多的字符串 #include<iostream>#include<string>#include<algorithm& ...

  6. Android源码和内核源码的下载,编译和执行

    笔者依据罗升阳老师的<Android 系统源码情景分析>一书,尝试下载,编译和执行Android源码和内核源码.但可能是软件源"被墙"或版本号更新的原因.期间遇到诸多问 ...

  7. 解决Mac安装M2Crypto提示无法找到openssl头文件问题

    大概是这种问题 running build running build_py running build_ext building'M2Crypto.__m2crypto' extension swi ...

  8. Java程序IP v6与IP v4的设置

    Java程序IP v6与IP v4的设置 //Prevent to get IPV6 address,this way only work in debug mode //But you can pa ...

  9. SSO单点登录系列4:cas-server登录页面自定义修改过程(jsp页面修改)

    落雨 cas 单点登录 SSO单点登录系列4:cas-server登录页面自定义修改过程,全新DIY. 目标:    下面是正文: 打开cas的默认首页,映入眼帘的是满眼的中文and英文混杂体,作为一 ...

  10. ContentProvider之通过ContentResolver获取图像、视频、音频举例

    MediaStore中定义了一系列的数据表格,通过ContentResolver提供的查询接口,我们能够得到各种须要的媒体信息.通过下面两个URI能够扫描设备外部和内部的媒体文件.Android系统提 ...