iOS之UI--彩虹动画进度条学习和自主封装改进

前言:

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

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

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

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

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

正文大纲:

  1. UI效果实现的结构分析
  2. 如何使用彩虹进度条

正文:

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、然后下面直接展示使用示例,接口不多,难度不大:

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

时间: 2024-08-09 19:53:58

iOS之UI--彩虹动画进度条学习和自主封装改进的相关文章

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

圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transf

jQuery Easy UI ProgressBar(进度条)组件

ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas

95秀-PK 动画 进度条 描边 圆角图片

PK界面 <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Rela

【iOS开发-10】UIProgressView进度条的几个属性介绍

进度条目前看来不如滑动控件(slider)实用,至少滑动控件可以让用户动,并且我们还能获得滑动控件的值. 目前还未体会到进度条的魅力. - (void)viewDidLoad { //实例化一个进度条,有两种样式,一种是UIProgressViewStyleBar一种是UIProgressViewStyleDefault,几乎无区别 UIProgressView *pro1=[[UIProgressView alloc]initWithProgressViewStyle:UIProgressVi

bootstrap动画进度条

创建一个动画的进度条的步骤如下: 添加一个带有 class .progress 和 .progress-striped 的 <div>.同时添加 class .active. 接着,在上面的 <div> 内,添加一个带有 class .progress-bar 的空的 <div>. 添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置. 这将会使条纹具有从右向左的运动感. 实例 <lin

Android 重写系统控件UI,自定义进度条

Android的系统控件没有对应的XML布局文件,界面的逻辑都是在onDraw(Canvas canvas)里面进行绘制 所以如果对控件的外观进行修改就需要重写onDraw(Canvas canvas)方法,控件的功能逻辑可以不变. 下面是继承ProgressBar重写了控件的界面,一个是加了文字的水平进度条,一个是圆圈的进度条 public class HorizontalProgressBarWithNumber extends ProgressBar { private static fi

iOS 图片加载 圆形进度条

项目中有加载网络图片的需求,加一个加载的进度条会提高用户体验,网络不好的时候会清晰的看到图片加载的进度,比让用户看着满屏幕空白好.下面是我们项目自己封装的圆形进度条,分享给大家. 其实实现原理很简单,只是根据图片加载的进度来绘制一个圆. 先来看.h文件,需要一个进度的属性和进度条展示位置的方法: @property (nonatomic, assign) CGFloat progress; +(HMProgressView *)showHMProgressView:(UIView *)paren

IOS开发UI篇--动画(Core Animation)总结

一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide.Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架.Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作.你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果.Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速

Android进度条学习

自定义属性 <!-- roundColor 圆环的颜色 roundProgressColor 进度的颜色 roundWidth 圆环的宽度 textColor 文字颜色 textSize 文字大小 max 最大值 textIsDisplayable 是否显示进度文本 style 样式 STROKE 空心 FILL 实心 --> <declare-styleable name="RoundProgressBar"> <attr name="roun