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

By | 02月11日
Advertisement

前言:

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

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

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

2、在初始化方法中

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

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

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

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

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

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

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

如何使用彩虹动画进度条

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

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

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

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

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

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

不得不提的改进的亮点

  • 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 尊重劳动成果。

Similar Posts:

  • iOS常用小功能(电话,短信,邮件)

    iOS中有很多的常用小功能:比如打电话,发邮件,发短信等: 一:打电话: 1:最简单直接的方法:直接跳转到拨号界面. NSURL * url = [NSURLURLWithString:@"110"]; [[UIApplicationsharedApplication]openURL:url options:nilcompletionHandler:nil]; 缺点:打完电话之后不会返回原来应用,直接停留在通话记录界面. 2:拨号之前弹框询问用户是否拨打电话,拨完电话之后会返回原应用.

  • IOS开发之功能模块--自定义导航控制器类常用自定义的代码

    前言:本文篇幅不多,但是涉及到的内容却是开发中常用的. 涉及的内容: 1.统一设置导航控制器子控制器的返回按钮. 2.因为修改了系统的返回按钮,所以还需要设置手势事件. 3.隐藏底部的工具条. 这里直接给出.m的实现文件,.h文件不需要,因为没有属性,没有自定义公开的方法. 1 #import "YMNavigationController.h" 2 3 @interface YMNavigationController () <UIGestureRecognizerDelega

  • iOS常用小功能集锦

    一.打电话 方法一: NSURL *url = [NSURL URLWithString:@"tel://10010"]; [[UIApplication sharedApplication] openURL:url]; 注:电话打完后,不会自动回到原应用,直接停留在通话记录界面. 方法二: NSURL *url = [NSURL URLWithString:@"telprompt://10010"]; [[UIApplication sharedApplicati

  • iOS 常用小功能——发邮件

    //方法1 //用自带的邮件客户端,发完邮件后不会自动回到原应用 NSURL *url = [NSURL URLWithString:@"mailto://10010@qq.com"]; [[UIApplication sharedApplication] openURL:url]; //方法2 //跟发短信的第2种方法差不多,只不过控制器类名叫做:MFMailComposeViewController 邮件发送后的代理方法回调,发完后会自动回到原应用 - (void)mailComp

  • 27个优秀APP加载动画与进度条设计案例

    调查显示人们总是希望看到进度条的,尤其是在各种数据化APP中.充分理解当前状态或进度,对用户来说至关重要.另外,在需要耐心等待的时候,进度条是极为强大的工具.活力四射.有趣且漂亮令人愉快的进度条,绝对会让我们短短数秒的等待时间兴致盎然. 而且,进度条是各种多媒体播放器的基本组成,提供了退后和前进的功能.让用户不只是跟随播放,更能控制它.进度状态的图形表达对于增加用户好感起着至关重要的作用,同时也建立了优秀的人机交互界面.一起来看这二十七个创新的案例吧. 带有载入动画与进度条的移动界面 案例一:

  • Python HTTP下载文件并显示下载进度条

    下面的Python脚本中利用request下载文件并写入到文件系统,利用progressbar模块显示下载进度条. 其中利用request模块下载文件可以直接下载,不需要使用open方法,例如: import urllib import requests.packages.urllib3 requests.packages.urllib3.disable_warnings() url = "https://raw.githubusercontent.com/racaljk/hosts/maste

  • 用Handler控制进度条的开始和停止

    功能: 1.进度条进度>100时候,停止. 2.可以点击停止键,随时停止,再点开始,又会继续开始走进度条 注意: 功能1,只要控制好,是不用移除的,只需要>100的时候,不再sendMessage即可. 功能2,要想可以随时停止,分4种情况: (1)post和sendMessage都不加delay (2)post带延迟:只需要在点击停止的代码里面,remove进程即可. (3)sendMessage带延迟:只需要在点击停止的代码里面,remove消息即可. (4)post和sendMessag

  • JavaScript实现简单进度条

    好久没更新博客了,换了工作环境,比较忙,月底了一篇文章都没有更新.这里简单实现一个功能.Javascript实习进度条.文本借鉴于:http://blog.csdn.net/2004v2004/archive/2008/02/19/2106689.aspx,在次基础上通过Javascript来实现这个功能.欢迎提出意见. 可以通过点击上面的按钮来看进度条的效果.点击此处展开代码: 点击展开 Code <script language="javascript"> functi

  • 用 VBA 实现在 PPT 最下边加个进度条

    用 VBA 实现在 PPT 最下边加个进度条,方便查看进行到总长度的多少,抓住了听讲人的心理:"啥时候才能讲完啊?"进度条只能体现已播放的幻灯片张数,不能用于计时. 打开 PPT,按 Alt+F8 新建个宏,随便取个宏名,不用改宏作用区域,点"创建",删除模块里的内容,把代码复制过去.(按 Alt+F11 之后插入模块也可以) 进度条宏的作者是水木社区的dukenuke. Sub ProgressBar() ' by dukenuke@newsmth.net ' S

  • OC笔记 - iOS适配、block内存泄露、电话短信邮件等小功能(2015.3.27)

    1.IOS适配问题 IOS6启动app时launchImage中出现了状态栏,而IOS7并没有出现这种情况.是因为IOS6的View不包含状态栏.在解决这个适配问题中,通常在项目勾选"Hide status bar"隐藏状态栏,然后在application的delegate的didFinishLaunchingWithOptions中用代码设置状态栏可见"application.statusBarHidden = NO;" 在代码中可拿到当前设备的版本号,可对此进行

Tags: