【iOS】环形渐变进度条实现
之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解。
环境信息:
Mac OS X 10.10.3
Xcode 6.3.1
iOS 8.3
效果图:
源码下载地址:
正文
一、视图层级
首先需要搞定的就是视图层级关系。可以看到,
1. 背景是有透明度的蓝色(blueView)
2. 需要一个从绿->黄->红的渐变色,那个这里我采用的是Layer(colorLayer)
3. blueView和colorLayer他们的表现状态都是环形的,所以还需要环形的遮罩
4. 蓝色的环并没有变,而渐变色的环却在时刻变化,所以需要两个遮罩,一个给蓝色(blueMaskLayer),一个给渐变色(colorMaskLayer)
从上面的分析可以看出,现在需要几个变量以及他们的关系如下:
[viewController.view addSubView:blueView];
[blueView.layer addSubLayer:colorLayer];
colorLayer.mask = colorMaskLayer;
blueView.layer.mask = blueMaskLayer;
视图层级图如下:
视图层级图
二、根据视图层级来实现
搞清楚了层级,接着就应该逐个实现了。
1. 有透明度的蓝色视图blueView
ViewController.m
BlueView *blueView = [[BlueView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
blueView.center = self.view.center;
blueView.backgroundColor = [UIColor blueColor]; // 我这里没有给透明度
[self.view addSubView:blueView];
2. 渐变图层colorLayer
因为系统没有提供根据路径渐变的实现方法,所以只能采用曲线救国的方式来画。那么我所使用的方法是:在左边画一个从下往上为绿->黄的渐变Layer(leftLayer),然后右边画一个从下往上为红->黄的渐变Layer(rightLayer)。
效果图如下:
渐变色
但是这种方式效果不是很好,因为黄绿色和橘红色的分界太明显,所以最好设置一个渐变的范围。
效果图如下:
设置渐变范围的渐变色
实现代码:
BlueView.m
- (void)setupColorLayer {
self.colorLayer = [CAShapeLayer layer];
self.colorLayer.frame = self.bounds;
[self.layer addSublayer:self.colorLayer];
CAGradientLayer *leftLayer = [CAGradientLayer layer];
leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width / 2, self.bounds.size.height);
// 分段设置渐变色
leftLayer.locations = @[@0.3, @0.9, @1];
leftLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
[self.colorLayer addSublayer:leftLayer];
CAGradientLayer *rightLayer = [CAGradientLayer layer];
rightLayer.frame = CGRectMake(self.bounds.size.width / 2, 0, self.bounds.size.width / 2, self.bounds.size.height);
rightLayer.locations = @[@0.3, @0.9, @1];
rightLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor redColor].CGColor];
[self.colorLayer addSublayer:rightLayer];
}
3. 渐变图层的环形遮罩colorMaskLayer
因为渐变图层环形遮罩和蓝色视图的环形遮罩样式都是一样的,所以可以将环形遮罩的创建代码封装出来:
BlueView.m
- (CAShapeLayer *)generateMaskLayer {
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = self.bounds;
// 创建一个圆心为父视图中点的圆,半径为父视图宽的2/5,起始角度是从-240°到60°
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2) radius:self.bounds.size.width / 2.5 startAngle:-3 / 4 * M_PI endAngle:1 / 3 * M_PI clockwise:YES];
layer.lineWidth = 20;
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor; // 填充色为透明(不设置为黑色)
layer.strokeColor = [UIColor blackColor].CGColor; // 随便设置一个边框颜色
layer.lineCap = kCALineCapRound; // 设置线为圆角
return layer;
}
设置渐变色环形遮罩层
BlueView.m
- (void)setupColorMaskLayer {
CAShapeLayer *layer = [self generateMaskLayer];
layer.lineWidth = 20.5; // 渐变遮罩线宽较大,防止蓝色遮罩有边露出来
self.colorLayer.mask = layer;
self.colorMaskLayer = [CAShapeLayer layer];
self.colorMaskLayer = layer;
}
4. blueView的环形遮罩blueMaskLayer
BlueView.m
- (void)setupBlueMaskLayer {
CAShapeLayer *layer = [self generateMaskLayer];
self.layer.mask = layer;
self.blueMaskLayer = layer;
}
5. 设置百分比
设置渐变色所占的百分比,其实就是改变colorMaskLayer的范围,系统提供了一个方法可以直接根据百分比来修改。
self.colorMaskLayer.strokeEnd = 0.5;
到此,整个效果就已经完成了,接下来说一下回弹动画。
三、设置回弹动画
我所使用的是pop库中的POPSpringAnimation,这个效果比较Q弹,加在进度条上刚好。要加动画,只需要把上面的修改strokeEnd的代码换成一下方法就可以了:
- (void)animationWithStrokeEnd:(CGFloat)strokeEnd {
POPSpringAnimation *strokeAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
strokeAnimation.toValue = @(strokeEnd);
strokeAnimation.springBounciness = 12.f;
strokeAnimation.removedOnCompletion = NO;
[self.colorMaskLayer pop_addAnimation:strokeAnimation forKey:@"layerStrokeAnimation"];
}
【iOS】环形渐变进度条实现的更多相关文章
- iOS圆弧渐变进度条的实现
由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...
- svg和css3创建环形渐变进度条
在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"&g ...
- 自定义控件之圆形颜色渐变进度条--SweepGradient
前几天在群里面有人找圆形可颜色渐变进度条,其中主要的知识点是SweepGradient: mSweepGradient = new SweepGradient(240, 360, new int[] ...
- Xamarin iOS教程之进度条和滚动视图
Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.Q ...
- iOS 渐变进度条
#import <UIKit/UIKit.h> @interface JianBianView : UIView //为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分 @ ...
- canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
- android自己定义渐变进度条
项目中须要用到一个弧形渐变的进度条,通过android自带是不能实现的.我是没有找到实现的方法,有大神知道的能够指点.效果图是以下这种 这是通过继承VIew来绘制出来的,网上也有相似的,可是代码那是相 ...
- vue 渐变 进度条 progress
废话 不多少说 ,直接上代码 新建文件 gradual-progress.vue <!-- * @Author: gfc * @Date: 2019-11-07 14:00:11 * @Last ...
- iOS学习-圆形进度条
效果: #import <UIKit/UIKit.h> @interface HsProfitRatePieWidgets : UIView { UILabel *_textLabel; ...
随机推荐
- 基于HTML5的WebGL电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...
- SQL Server - 把星期一(周一)当作每个星期的开始在一年中求取周数
先感叹一句!好长时间没有更新博客了!偶尔看到一句话,觉得被电击了 - 庸人败于懒,能人败于傲! 因此,不能再懒惰了! 今天想写一个有关计算 Week Number 的函数,刚开始觉得应该很简单,凭着感 ...
- JS 实现可停顿的垂直滚动
var ScrollMiddle = { 'Odiv':document.getElementById('comment'), // 目标DOM 'Oli': document.getElementB ...
- 功能更新到 Windows 10 企业版, 版本 1607
功能更新到 Windows 10 企业版, 版本 1607
- MVC过滤器的用法
APS.NET MVC中的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理.这时候就用到了过滤器. 在Asp.netMvc中当你有以下及类似 ...
- 【转】NoSQL初探之人人都爱Redis:(2)Redis API与常用数据类型简介
一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...
- C语言学习015:联合(union)与枚举(enum)
联合 联合和结构的区别是,结构会为每个字段申请一片内存空间,而联合只是申请了一片内存空间然后所有字段都会保存到这片空间中,这片空间的大小由字段中最长的决定,下面我们就开始定义一个联合 //联合的定义 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出
数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform ...
- 【VBS】vbs指定编码保存文本文件(含xml、ini什么的)
本文还是折腾安装包期间衍生出来的产物. 我那安装包在安装期间有这个动作: - 让用户填写一些信息,待安装完成后把这些信息写入软件安装目录中的指定ini.xml文件中 上文说的是如何用vbs写ini,i ...
- SQL SERVER与C#中数据类型的对应关系
对应关系表 SQL Server2000 http://hovertree.com/menu/sqlserver/ C# CodeSmith 数据类型 取值范围 数据类型 取值范围 空值代替值 数据类 ...