文档章节

iOS 做一个圆形渐变圆环

TouchMing
 TouchMing
发布于 01/15 22:07
字数 289
阅读 233
收藏 0

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

    CGFloat layerWH = 100;
    _contentLayer = [CALayer layer];
    [self.view.layer addSublayer:_contentLayer];
    _contentLayer.frame = CGRectMake(100, 100, layerWH, layerWH);
    _contentLayer.backgroundColor = [UIColor blueColor].CGColor;

效果如图: 输入图片说明

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

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

效果如图: 输入图片说明

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

输入图片说明

    NSMutableArray *colors = [NSMutableArray arrayWithObjects:(id)[UIColor yellowColor].CGColor,(id)[UIColor orangeColor].CGColor, nil];
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.shadowPath = bezierPath.CGPath;
    gradientLayer.frame = CGRectMake(0, 0, layerWH * 0.5, layerWH);
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    [gradientLayer setColors:[NSArray arrayWithArray:colors]];
    
    NSMutableArray *colors1 = [NSMutableArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[[UIColor orangeColor] CGColor], nil];
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.shadowPath = bezierPath.CGPath;
    gradientLayer1.frame = CGRectMake(layerWH * 0.5, 0, layerWH * 0.5, layerWH);
    gradientLayer1.startPoint = CGPointMake(0, 0);
    gradientLayer1.endPoint = CGPointMake(0, 1);
    [gradientLayer1 setColors:[NSArray arrayWithArray:colors1]];
    [_contentLayer addSublayer:gradientLayer]; //设置颜色渐变
    [_contentLayer addSublayer:gradientLayer1];

效果如图: 输入图片说明

最后叠加的效果如图:

输入图片说明

© 著作权归作者所有

共有 人打赏支持
TouchMing
粉丝 5
博文 8
码字总数 4961
作品 0
广州
iOS使用Objective-c自定义cordova插件(-)

本系列教程为博主初次使用开发,内容如有差错,欢迎指正,敬请谅解。 博客地址:http://blog.img421.com/iosshi-yong-object-czi-ding-yi-cordovacha-jian/ Mac安装ionic和cordova我们已经熟悉,...

Michaelyn
2017/10/23
0
0
iOS三维菜单、调试工具、封装通讯录、网络框架、多种控件和动画等源码

iOS精选源码 一个调用系统通讯录和获取通讯录所有联系人的封装(http://www.code4app.com/thread-29726-1-1.html) ios scrollview嵌套tableview同向滑动(初级、进阶), 支持OC / Swift(http...

sunnyaigd
05/15
0
0
React Native 利用webView 加载echars图表 不显示问题

先看下 效果图吧 之前用 第三方组件 native-echarts 也实现了雷达图,但是比较复杂,而且 android 和ios 上引入tpl.html文件也不一样,而且也没有上图中的渐变,反正效果不是很好。 我算是比...

JsLin_
07/13
0
0
10个优秀Objective-C和iOS开发在线视频教程

如果你自己开发iOS应用,你肯定会发现网上有很多资源。学习编程的一个最好的方法就是自己写代码,而开始写代码的最快的方式就是看其他人怎么写。我们从海量视频和学习网站中整理出了我们认为...

mingxun
2014/05/09
0
0
iOS天气动画、高仿QQ菜单、放京东APP、高仿微信、推送消息等源码

iOS精选源码 TYCyclePagerView iOS上的一个无限循环轮播图组件(http://www.code4app.com/thread-14507-1-1.html) iOS高仿微信完整项目源码(http://www.code4app.com/thread-14695-1-1.html)......

sunnyaigd
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

简易审计系统

1、有时候我们需要对线上用户的操作进行记录,可以进行追踪,出现问题追究责任,但是linux自带的history并不会实时的记录(仅仅在内存中,当用户正常退出(exit logout )时才会记录到history文件里...

芬野de博客
22分钟前
1
0
Qt那些事0.0.6

QML中使用Image,在设置source的后,通过Qt Quick2 Preview(qmlscene)遇到了图片找不到的问题: Image { id: success_img anchors.centerIn: parent ...

Ev4n
23分钟前
2
0
白话SpringCloud | 第十一章:路由网关(Zuul):利用swagger2聚合API文档

前言 通过之前的两篇文章,可以简单的搭建一个路由网关了。而我们知道,现在都奉行前后端分离开发,前后端开发的沟通成本就增加了,所以一般上我们都是通过swagger进行api文档生成的。现在由...

oKong
28分钟前
2
0
javah 生成jni文件的问题

命令:(on macbook for android) javah -d src/main/jni -jni -classpath /Users/Carlyle_Pro/Documents/android_adt/sdk/platforms/android-25/android.jar:build/intermediates/classes/......

Carlyle_Lee
31分钟前
1
0
Ubuntu 安装ssh服务以及开启root用户ssh登录

一、安装ssh服务 安装ssh服务 sudo apt-get update sudo apt-get install openssh-server 安装完成后启动ssh服务 sudo service ssh start 二、开启root用户ssh登录 解决root远程ssh不能登录,...

15834278076
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部