文档章节

iOS 做一个圆形渐变圆环

TouchMing
 TouchMing
发布于 01/15 22:07
字数 289
阅读 328
收藏 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 7大量设计细节:黑色、白色,各种扁平设计

苹果将在下个月10号举行的WWDC 2013上推出下一代iOS和OS X,苹果iPhone、iPad和iPod touch将迎来界面大改的iOS 7。今天,据消息人士又给出了下一代iOS操作系统的设计细节。 苹果工业设计主管...

oschina
2013/05/25
4.7K
32
半圆形的slider,怎么实现??急求demo

iOS开发,Xcode下如何实现 根据中间显示的数字,白色小圆环在大的半圆环上移动,各位大神,急求啊

大湾子
2014/02/13
326
3
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转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码

iOS精选源码 view controller transition and popover (控制器转场和弹窗)(http://www.code4app.com/thread-31451-1-1.html) UITableView头部悬停+UITableView侧滑嵌套(http://www.code4ap......

Android爱开源
12/06
0
0
Android系统下打开有定时器的html页面动画效果很卡

我写了一个HTML页面,用了canvas去动态的画一个圆环。 圆环中间有一个点。页面加载的时候会慢慢的滑动。用了定时器去实现。 在ios系统下测试过很流畅。但是在Android下用网页打开发现圆点一顿...

会打杂的前端攻城狮
2014/05/16
796
3

没有更多内容

加载失败,请刷新页面

加载更多

《阿里铁军》的读书笔记和读后感范文2600字

《阿里铁军》的读书笔记和读后感范文2600字: 在中国互联网,有一个流传很广的说法是,百度强在技术,腾讯强在产品,阿里强在运营。虽然发展到今天,已经不能再用这样简单的视角来看待这三个...

原创小博客
24分钟前
1
0
怎样实际项目中运用责任链模式

1 模式概要 1.1 简介 责任链模式为请求创建一个接收者对象链,每个接收者都包含对另一个接收者的引用,如果一个对象不能处理该请求,那么它会把请求传给下一个接收者,依此类推 责任链模式避...

小刀爱编程
39分钟前
2
0
【宇润日常疯测-004】JS 遍历数组如何快!快!快!

首先,我就是一后端全栈,对前端也只是会用罢了。闲的无聊来测测,不深究,只看表面,不喜勿喷! 遍历数组在写 JS 代码时候一定是经常用的,那么怎么遍历能达到最高效率呢,很多人一定没有测...

宇润
43分钟前
10
1
Linux系统如何定制History输出格式

Linux系统使用History命令来查看系统的运行记录,从而找出一些问题。但是History输出的数据中常常没有时间等信息。本文就来教大家Linux系统如何定制History输出格式。   具体方法如下 以r...

linuxprobe16
45分钟前
2
0
(一) pyhon 基础语法(数值 字符串 元组 列表 字典)

1、python的数据类型: 数值 字符串 列表 元组 字典; 数值类型包括; 整型(int) 长整型(long) 浮点型(float) 复数型 字符串; 可以通过type() 来查看是什么类型的; 注释:len()只支持 字符...

芬野de博客
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部