iOS 开发--动画

在iOS开发中,制做动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是很是重要的。咱们老是追求更为酷炫的实现,若是足够仔细,咱们不难发现一个好的动画经过步骤分解后本质上不过是一个个简单的动画实现。本文就我的搜集的一些动画相关的理论和实践知识作个小结,不足之处请勿见怪。数组

理论 UIview VS UIlayerapp

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动画url

000.jpg

UIView.net

006.jpg

 

 

弹性动画设计

002.jpg

关键帧动画(中间能够添加合适多的帧来作不一样的衔接动画)3d

001.jpg

 

CALayer动画指针

QQ截图20160311103444.png

经常使用属性 orm

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 实现下拉剪头的展开和收起

273.jpg

  • 关键帧动画(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没有设置的时候,各个关键帧的时间是平分的。

  • 组合动画:

271.jpg

  • 过渡动画(CATransition) 多数为私有的API使用后没法上架app。 私有API提供了其余不少很是炫的过渡动画,好比@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。

粒子动画

transform动画

transform是一个很是重要的属性,它在矩阵变换的层面上改变视图的显示效果,完成旋转、形变、平移等等操做。在它被修改的同时,视图的frame也会被真实改变。有两个数据类型用来表示transform,分别是CGAffineTransform和CATransform3D。前者做用于UIView,后者为layer层次的变换类型。基于后者能够实现更增强大的功能。 对于想要了解矩阵变换是如何做用实现的,能够参考这篇博客: CGAffineTransform 放射变换

272.jpg在开始使用transform实现你的动画以前,我先介绍几个经常使用的函数:

272.jpg

transform严格的说不是一种动画,而是动画中的一部分操做,我拿出来讲是由于它同时出如今了UIView 动画和CALayer动画中。

一些应用

利用上面CALayer 基础动画的代码实现下拉剪头的展开和收起,还能够实现时钟指针的旋转

51.jpg

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

QQ图片20160311102656.gif

利用CAShapeLayer 和CABasicAnimation 能够实现加载动画。

9080b2e6fcfcae3165ee971f41b2300e.png

iOS渲染视图的层级图: 

91603d0368ed8f57c1b250856008573c.png

更多内容能够点击 iOS开发UI篇--iOS动画(Core Animation)总结

相关文章
相关标签/搜索