前言:

首先展示一下这个iOS小示例的彩色进度条动画效果:

阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块类用到你的工程项目中即可。

这个效果的示例是老外Nick Jensen在2013年写的一个作品:使用CAGradientLayer的动画进度条View。 本人阅读了老外的源码之后,觉得老外这个进度条的效果很不错,但是觉得他写的代码有待改进。

小贴士:读者可以直接将老外的源码下载下来,跑一下,然后对比本人写的博文重构的思路过程,进行学习。另外要提出一点的是,老外这个源码毕竟产出比较早,所以用的是MRC,代码中多出用到了retain和release手动内存管理,但是本人的源码是基于ARC的,所以就不涉及用到手动内存管理的代码了。

注意:本篇博文需要有一定的iOS开发基础,主要需要熟悉并能掌握关于CAGradientLayer(颜色渐变层)、CAShapeLayer(形状层)、核心动画基础以及layer、layer.mask等知识,否则读者看此文会有很多不理解的地方。至少可能看老外的源码都会有很多不懂的地方。关于CAGradientLayer(颜色渐变层)、CAShapeLayer(形状层)可以阅读本人博客中前几篇博文笔记。

正文大纲:

  1. UI效果实现的结构分析
  2. 如何使用彩虹进度条
  3. 不得不提的改进的亮点??

正文:

UI效果实现的结构分析:

  • 1、先添加一个Rect(0,0,[UIScreen mainScreen].bounds.size.width,2)的矩形CAGradientLayer对象。
  • 2、在这个CAGradientLayer对象上,用核心动画实现彩虹条无限循环轮播移动过程。
  • 3、为这个CAGradientLayer添加遮罩层,这个遮罩层好比再添加一个同等宽高坐标的矩形,遮住了gradientLayer对象
  • 4、然后将这个遮罩层的宽度提供一个接口供外部调用,通过改变这个遮罩层的宽度来显示不被遮住部分的彩虹条

代码实现思路(和Nick Jensen的差不多,但是后面有所改进):

1、重写类方法layerClass,将UIView默认的CALayer对象类型换CAGradientLayer

2、在初始化方法中

3、因为需要轮播循环彩虹条动画,所以当然需要一个辅助的数组元素转换的算法方法

4、然后通过核心动画,来实现彩虹条轮播动画

5、最后重写对外公开的两个接口的属性

如何使用彩虹动画进度条

1、首先到本人github上UIView下载第5个UIView实现好的小功能RainBowProgress。

2、然后将该功能项目中的RainbowProgress的整个文件目录拖进你的项目中:

3、然后下面直接展示使用示例,接口不多,难度不大:

不得不提的改进的亮点

  • Nick Jensen实现进度条遮罩层的方式:

    • 1、外部调用接口,根据外部数据不断的更改progress进度值
    • 2、在progress的set方法内部调用了[self setNeedsLayout];
    • 3、[self setNeedsLayout]会在内部重新调用layoutSubviews方法
    • 4、而layoutSubviews的重写方法中根据progress值更改遮罩层的长度
    • 5、从而触发了CALayer的隐式动画,实现了进度条展示进度的效果

注意:Nick Jensen的遮罩层用的是CALayer创建的对象

  • 本人实现进度条的遮罩层的方式

    • 1、外部调用接口,根据外部数据不断的更改progress进度值
    • 2、在progress的set方法内部调用了self.shapeMaskLayer.strokeEnd = _progressValue;
    • 3、这样就直接更改了遮罩层(CAShapeLayer)的终点值,更改了遮罩层的长度
    • 4、从而触发了CAShapeLayer的隐式动画,实现了进度条展示进度的效果

注意:本人的遮罩层用的是CAShapeLayer创建的对象

所以相对而言,本人的代码也简单一些。哈哈,其实也没什么。能实现不出bug就好。

转载需注明出处:http://www.cnblogs.com/goodboy-heyang/p/5186730.html 尊重劳动成果。

iOS之小功能模块--彩虹动画进度条学习和自主封装改进相关推荐

  1. canvas画板涂鸦动画进度条动画

    目录 什么是 canvas 画板涂鸦动画 进度条动画 写在最后 什么是 canvas canvas 是 HTML5 新定义的标签,通过使用脚本(通常是 JavaScript)绘制图形.允许脚本语言动态 ...

  2. 可拖动的进度条_TIM iOS版重大更新:支持语音进度条拖动和暂停

    3月30日消息,今日腾讯正式发布了QQ办公简洁版TIM iOS版2.5.6的更新.此次更新中,腾讯在TIM中新增了许多实用性功能,比如大家期待已久的语音消息支持进度前后拖动和暂停.微信账号登录等. 在 ...

  3. 基于canvas 2D实现微信小程序自定义组件-环形进度条

    基于canvas 2D实现微信小程序自定义组件-环形进度条 最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...

  4. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head>< ...

  5. 超赞圆形动画进度条,爱了爱了(使用HTML、CSS和bootstrap框架)

    使用HTML和CSS的圆形动画进度条 使用HTML和CSS的圆形动画进度条 步骤1:创建进度栏的结构 步骤2:使用CSS代码设计圆形 步骤3:在进度栏中添加加载动画 步骤4:添加其他颜色以使加载动画更 ...

  6. iOS实现一个颜色渐变的弧形进度条

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  7. ios弧形进度条_【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  8. android录音波浪动画_Android 自定义 view 实现波浪动画进度条

    最近在做项目时需要实现这样一种动画,类似于波浪形的进度动画,粗略的看了一下,发现好像类似于正余弦曲线实现的,但是Android 没有相关的API,所以需要我们动手画出来,所以现在在此记录一下学习过程, ...

  9. python time模块sleep之进度条应用

    1.sleep 程序等待唤醒 import time time.sleep(3) print('测试101') 2.进度条小应用 ###让进度条动起来 str='' for i in range(50 ...

  10. iOS通过CAShapeLayer和UIBezierPath画环形进度条

    UIBezierPath可以绘制矢量路径,而CAShapeLayer是Layer的子类,可以在屏幕进行绘制,本文主要思想是:CAShapeLayer按照UIBezierPath的矢量路径进行绘制. 效 ...

最新文章

  1. idea 使用正则表达式 进行匹配替换
  2. [YTU]_2498 (C++类实现最大数的输出)
  3. 最大公约数 数学,结论 第九届“图灵杯”NEUQ-ACM程序设计竞赛个人赛
  4. 不允许从数据类型 ntext 到数据类型 varchar 的隐性转换
  5. maven工程如何引用css和js文件
  6. Perl文件句柄引用
  7. 这是一份面向Android开发者的复习指南,成功入职字节跳动
  8. LeetCode 378. 有序矩阵中第K小的元素(二分查找)
  9. 1100: 求组合数(函数专题)
  10. java自定义一个方法,用于返回两个整数的和
  11. jQuery:掌握选择器
  12. GDAL源码剖析(四)之命令行程序说明一
  13. adb server version not match client
  14. linux brctl
  15. 走进音视频的世界——新一代开源编解码器AV1
  16. 3Dmax各类问题汇总及其完整解决方法
  17. swarm主网BZZ挖矿:钱包如何添加BZZ合约?如何查钱包余额?
  18. 心电监护仪数据图解_心电监护仪数据怎么看
  19. 新电脑Linux反应慢怎么回事,电脑反应慢怎么处理 教你几招解决电脑卡慢问题
  20. 【SQL监控】SQL完全监控的脚本

热门文章

  1. html掷骰子游戏的代码,掷骰子的小程序 HTML5
  2. 数据降维:主成分分析法(PCA)
  3. 基于Q-Learning 的FlappyBird AI
  4. windows 无法停止ics_多种方法解决Win10系统ICS服务启动后停止问题
  5. 美菜半年退出数百个县城,开始往盈利迈进
  6. STM32的ETR引脚计数功能
  7. vue项目的IE兼容问题
  8. 带你一起敲敲ES6的新特性,边解释边应用!
  9. 基于Matlab的机器人学建模学习资料大整理
  10. getrusage-进程资源统计函数