iOS 开发--动画
在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的。我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通过步骤分解后本质上不过是一个个简单的动画实现。本文就个人搜集的一些动画相关的理论和实践知识做个小结,不足之处请勿见怪。
理论 UIview VS UIlayer
UIView只是CALyer之上的封装,更准确的来说,UIView是CALyer的简版封装,加上事件处理的集合类。 CALayer是QuartzCore库内的类,是iOS上最基本的绘制单元。其次,我们知道iOS平台的Cocoa Touch 是源于OS X平台的Cocoa),是在Cocoa的基础上添加了适用于移动手机设备的手势识别、动画等特性;但从底层实现上来说,Cocoa Touch与Cocoa共用一套底层的库,其中就包括了QuartCore.framework;但QuartCore.framework一开始就是为OS X设计的,所以其中有部分特性是不适合做移动设备开发的,比如最重要的坐标系统。因此,我们也就不难理解为何UIView/NSView在CALayer上做了一层封装。
基于UIView实现的动画
简单的Block动画

UIView

弹性动画

关键帧动画(中间可以添加合适多的帧来做不同的衔接动画)

CALayer动画

常用属性
duration : 动画的持续时间
beginTime : 动画的开始时间
repeatCount : 动画的重复次数
autoreverses : 执行的动画按照原动画返回执行
timingFunction : 控制动画的显示节奏,系统提供五种值选择, 分别是
kCAMediaTimingFunctionLinear 线性动画
kCAMediaTimingFunctionEaseIn 先慢后快(慢进快出)
kCAMediaTimingFunctionEaseOut 先块后慢(快进慢出)
kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
kCAMediaTimingFunctionDefault 默认,也属于中间比较快
path:关键帧动画中的执行路径
type:过渡动画的动画类型,系统提供了四种过渡动画:
kCATransitionFade 渐变效果
kCATransitionMoveIn 进入覆盖效果
kCATransitionPush 推出效果
kCATransitionReveal 揭露离开效果
subtype : 过渡动画的动画方向
kCATransitionFromRight 从右侧进入
kCATransitionFromLeft 从左侧进入
kCATransitionFromTop 从顶部进入
kCATransitionFromBottom 从底部进入
基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如:位移、透明度、缩放、旋转、背景色等等。 重要属性 fromValue : keyPath对应的初始值 toValue : keyPath对应的结束值。
基础动画(CABaseAnimation) 0:1 1:0 实现下拉剪头的展开和收起

关键帧动画(CAKeyframeAnimation) CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。 重要属性 values : 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 path : 可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略。 keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。
组合动画:

过渡动画(CATransition) 多数为私有的API使用后无法上架app。 私有API提供了其他很多非常炫的过渡动画,比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。
粒子动画
transform动画
transform是一个非常重要的属性,它在矩阵变换的层面上改变视图的显示效果,完成旋转、形变、平移等等操作。在它被修改的同时,视图的frame也会被真实改变。有两个数据类型用来表示transform,分别是CGAffineTransform和CATransform3D。前者作用于UIView,后者为layer层次的变换类型。基于后者可以实现更加强大的功能。 对于想要了解矩阵变换是如何作用实现的,可以参考这篇博客: CGAffineTransform 放射变换
在开始使用transform实现你的动画之前,我先介绍几个常用的函数:

transform严格的说不是一种动画,而是动画中的一部分操作,我拿出来说是因为它同时出现在了UIView 动画和CALayer动画中。
一些应用
利用上面CALayer 基础动画的代码实现下拉剪头的展开和收起,还可以实现时钟指针的旋转

输入框在输入错误信息时的摇晃效果。

利用CAShapeLayer 和CABasicAnimation 可以实现加载动画。

iOS渲染视图的层级图:

更多内容可以点击 iOS开发UI篇--iOS动画(Core Animation)总结。
iOS 开发--动画的更多相关文章
- iOS开发--动画篇之layout动画深入
"不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常 ...
- iOS开发——动画OC篇&知识点总结
图层与动画知识点总结 1.Core Animation 非娱乐类的软件都会用到的动画,操作简单. 2.Quartz 2D绘图 是一个2D绘图引擎. (1) 绘图Context是一个绘图的目标对象,定义 ...
- iOS开发——动画篇Swift篇&动画效果的实现
Swift - 动画效果的实现 在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...
- iOS开发--动画(Animation)总结
UIView的,翻转.旋转,偏移,翻页,缩放,取反的动画效果 翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:ni ...
- iOS开发——动画总结OC篇&所有常用动画总结
所有常用动画总结 先来装下B,看不懂没关系,其实我也看不懂-
- iOS开发——动画编程Swift篇&(五)CAKeyframeAnimation
CAKeyframeAnimation //CAKeyframeAnimation-关键针动画 @IBAction func cakFly() { let animation = CAKeyframe ...
- iOS开发——动画编程Swift篇&(四)CABasicAnimation动画
CABasicAnimation动画 //CABasicAnimation-不透明度 @IBAction func cabOpacity() { let animation = CABasicAnim ...
- iOS开发——动画编程Swift篇&(三)CATransition动画
CATransition动画 // MARK: - CATransition动画 // /* 动画样式 */ // let kCATransitionFade: NSString! //翻页 // l ...
- iOS开发——动画编程Swift篇&(二)UIView转场动画
UIView转场动画 // MARK: - UIView动画-过度动画 var redView:UIView? var blueView:UIView? // enum UIViewAnimation ...
随机推荐
- DF与EF的区别
DF:专有文件 EF:基本文件 1.EF没有文件名,只有FID(文件标识符) 2.DF有文件名,又有FID,因此COS可以根据文件名来访问DF
- LNMP系列网站零基础开发记录(三)
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
- android开发 drawtext的开始坐标位置
我们canvas绘制文字的遇到一个不知道drawtext(str,x,y,paint) 中的x.y坐标值怎么定义,,如果设为(0,0)的话文字就不会出来了.因此查找到一下资料: 问:canvas.d ...
- websphere OSGi应用环境下服务调用saaj包加载问题分析报告
websphere OSGi应用环境下服务调用saaj包加载问题分析报告 作者:bingjava 版权声明:本文为博主原创文章,转载请说明出处:http://www.cnblogs.com/bingj ...
- Vue2.0 vue-source.js jsonp demo vue跨域请求
以调用百度的输入提示接口为例 ===================================================================================== ...
- ios 调用打印机
源码 无意中玩一个demo发现调用了打印机 才发现ios有快速调用打印机的功能. if ([UIPrintInteractionController isPrintingAvailable] == ...
- nsight 使用问题
slot 0 offset 0 stride DXGI_FORMAT_r32b32g32_FLOAT 这样一个memory 100.0000, 100.0000,10.0000,1.0000 stri ...
- eclipse中本地项目怎么和svn中的项目关联?
网速不好,通过别的方式把项目下载到本地硬盘,然后导入eclipse,代码修改后怎么提交到svn呢? 这个纠结了好久的问题... 首先要确定eclipse中安装了svn插件. 然后在“svn资源库研究” ...
- javaScript中eval()方法转换json对象
<script language="javascript"> var user = '{name:"张三",age:23,'+ 'address:{ ...
- PHP 路径或URL操作
echo 'documentroot:'.$_SERVER['DOCUMENT_ROOT'].'<br>'; //根目录,在apache的配置文件里定义:httpd.conf 比如:Doc ...