matlab画图环形颜色渐变,Core Animation实战之环形颜色渐变进度条
小弟才疏学浅,第一次写简书文章,内容难免有错误或者不妥,欢迎大家来指点江山。。。
先来看一下最终的效果:
特点:圆环是顺时针旋转,旋转的过程中,始终保持圆环的开始端颜色最浅(白色),圆环的结尾是最深(0xEC1161).
在刚开始要做这个东西的时候,是因为想做一个下拉刷新的动画,这个动画要做到在下拉的过程中,有一个颜色渐变的圆环在变大,而且是要始终保湿圆环的开头是白色,圆环的结尾是0xEC1161最深色。
想了几个方法,都不太理想,其中包括在圆环的底部放置一个圆环图片,下拉过程中,拖过CALayer的mask功能来把需要显示的圆环给扣出来显示,最终我采用了最简单的方式,就是直接无限旋转一个圆环图片,醉了。。
这事完了之后,我不甘心,决定好好来实现以下这个动画效果,就来了这个;下面简要分析写这个动画的实现逻辑(可能对后续要实现一个进度条或者类似于360安全卫士清理时的进度条有一定的帮助)。
1. 这个圆环底部是一个UIView,在UIView上添加N(N>=2)个扇形的渐变CAGradientLayer,并让这几个扇形渐变的层正好布满这个圆;
2. 这一系列扇形的CAGradientLayer的制作方法是:
a) 先画一个UIView上半部分大小的CAGradientLayer;
b) 计算CAGradientLayer的startPoint和endPoint,这俩值的大小是根据1中的N决定的,N越大,endPoint.x-startPoint.x越小,而且endPoint.x和startPoint.x是以0.5为中心向两边偏移相等的距离,startPoint.x=0.5-sin(1.f/N*M_PI)/2.f,endPoint.x=0.5+sin(1.f/N*M_PI)/2.f,这里用到了简单的直角三角形的sin函数计算;
c) 制作一个扇形的Layer,并把这个扇形Layer作为CAGradientLayer的mask,扇形Layer的UIBezierPath的绘制也是以中间为轴,向两边偏移,偏移的大小b中的计算是一样的,startAngle=(-90.f/180.f*M_PI - 1.f/N*M_PI), endAngle=(-90.f/180.f*M_PI + 1.f/N*M_PI)
d) 最后,按照添加的次序,依次旋转CAGradientLayer,使得N个Layer正好铺成一个圆;
3. 然后在最上层添加一个CAShapeLayer,并且让这个layer的frame的大小比最底层的UIView的frame稍微小一点(这个差值就是圆环的粗细),同时让这个Layer的position等于UIView的center;
4. 稍微旋转下最上层的CAShapeLayer,以做到等下针对该Layer的strokeStart做动画时,能够从中标的0点钟位置开始,顺时针方向做动画;
5. 下面是动画的部分,动画分为两个步骤,一个是针对oval.strokeStart的动画,一个是针对N各扇形layer的locations的动画
a) 针对oval.strokeStart的动画简单,执行N个单位时间,直接添加该动画即可;
b) 针对N各扇形的动画,是依次延迟 i (i从0开始)执行的,执行N-i个单位时间,并且每一个扇形的locations的开始值得第一个值是-i,第二个值是0,而且结束值得第一个值不变,第二个值是N-1,这是为什么呢?是因为要做到N个扇形的颜色能够无缝衔接,具体原因上代码(Talk is cheap, show me the code.),大家一看便明了(注:在初始化扇形Layer的时候,已经指定过了layer.locations=@[@(-i),@0.f]);
至此,大功告成,GradientLayerCount的值就是N,可以随意修改配置,但是要保证大于等于2.
最后附上项目完整代码链接(https://github.com/ShakeShakeMe/CircleProcessBar)。
修改:修改为可以手动执行动画(也就是通过滑块来执行动画)。
(欢迎大家来踩)
matlab画图环形颜色渐变,Core Animation实战之环形颜色渐变进度条相关推荐
- matlab画图五角星标记,Matlab---画图线型、符号及颜色
Matlab 画图 线形.颜色.数据点形状的选择 1,线形 - Solid line (default) -- Dashed line : Dotted line -. Dash-dot line 2 ...
- iOS实现一个颜色渐变的弧形进度条
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
- ios弧形进度条_【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
- android ProgressBar 自定义进度条颜色
android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对android自定义进度条的学习过程! 这个没法了只能看源码了,还好下载了源码, sources\bas ...
- c# progressBar进度条改变颜色及显示进度数字
近段时间公司一个项目需要做一项功能,显示一个操作的进度条.按照客户的要求需要设置特定的前景及背景颜色,但是c#工具自带的控件progressBar不支持属性里面直接设置前景及背景颜色,并且不能显示进度 ...
- Android环形颜色渐变进度条
我的视频课程:<FFmpeg打造Android万能音频播放器> 距离上次写博客又过了许久的了,懒起来还真是莫法,废话就不说多了,哈哈.今天要讲的就是一种常见的"环形颜色渐变的圆环 ...
- Matlab画图时的线型、标记以及颜色简记
文章目录 背景 线型 标记 颜色 例说 背景 使用Matlab画图的时候经常由于需要画图,但是总是忘了曲线颜色.线型以及标记,这里在这里记录下,方便查阅. 效果预览: LineSpec -线型,标记和 ...
- matlab画图线型、符号、颜色
Matlab 画图 线形.颜色.数据点形状的选择 1,线形 - Solid line (default) -- Dashed line : Dotted line -. Dash-dot line 2 ...
- Matlab画图常用的线条符号、颜色
目录 一.matlab颜色表 二.matlab调色板 1.常用颜色的RGB值 2.产生标准调色板的函数 三.matlab线条 1.例子1 2 .例子2 3 .若要改变颜色,在座标对后面加上相关字串即可 ...
最新文章
- 帧中继简单总结(修改)
- 格力入局的数控机床,掌握“核心科技”有多难?
- 查看linux版本信息
- 评分卡模型剖析之一(woe、IV、ROC、信息熵)
- CSS那些不大不小的事
- (20)Xilinx FPGA型号(FPGA不积跬步101)
- python 中self
- Mac小技巧:在mac上怎么把png转换成jpg
- autoComplete实现的输入下拉联想功能
- css 3 制作水波状进度条
- android播放vp8透明,Androids 使用MediaCodec在TV端播放不了视频
- HTML多选框,全选,多选
- python tolist()函数
- Silverlight MMORPG WebGame游戏设计(二)--通讯协议之惑
- Python中的sys.argv是什么含义
- git两个分支代码合并
- 2019亚洲蓝牙大会成果盘点
- 小米温湿度计接入homeassistant
- MySQL数据库修改表某一列数据(一整列)
- 从安装到连接,教你如何连上Mysql数据库