代码改变世界

CALayer动画

2016-05-29 11:02  DenseFog  阅读(754)  评论(0编辑  收藏  举报

  Core Animation是一个复合引擎,它的职责就是尽可能快地组合屏幕上不同的可视内容,这个内容是被分解成独立的图层,存储在一个叫做图层树的体系之中。而我们常使用的UIView中都包括一个background layer。在iOS中有4种层级树:视图树、图层树、呈现树、渲染树。那么我们来对比下UIView和CALayer在什么情况下适用。

UIView CALayer

阴影,圆角,带颜色的边框

响应链

3D变换

自动布局

非矩形范围

 

透明遮罩

 

多级非线性动画

 

 

一、CALayer属性

  下面列举出几个CALayer常用的属性

  contents:layer的寄宿对象,CGImage类型

  contentsGravity:对象的填充模式,和UIView中的fillMode一个作用

  contentsScale:适配高分辨率的缩放因子

  masksToBounds: 是否以bounds进行剪切

  contentsRect:显示图片中的rect区域。这个属性常用于“拼合”的技术中,将很多的小的图片集合在一张大的图片中,然后应用根据rect来显示

  contentsCenter:图片的缩放区域。这样我们可以提供一个小图,而指定小图中不变的区域,其它区域根据情况进行缩放

  这些属性中,我们现在很少使用到contentsRect以及contentsCenter,然后不得不说这两种属性是很有用的,可以一定程度的减少软件的大小

 

二、图层位置

  我们在设置图层位置的时候经常设置frame,但最好的方式是设置bounds和position。而在位置中还有一个参数anchorPoint,锚点。锚点你可以理解为图层旋转的时候参考点。这里有个公式对于这三个参数的描述:

  frame.origin.x = position.x - anchorPoint.x * bounds.size.width

  frame.origin.y = position.y - anchorPoint.y * bounds.size.height

  层做变换的时候,比如旋转或者缩放frame的size可能和bounds的size不一致。

 

  我们看到设置anchorPoint中的点点位置不展示的不同。

 

三、变换

  在iOS中有两种变换:

  CGAffineTransform:二维的变换,包括transform,scale,rotation.UIView的transform就是这种,所以不能做3D

  CATransform3D:三维的变换,包括transform,scale,rotation. 这里注意定义了m34才能拥有斜切的视觉。m34模拟了摄像机到物体的距离。

  有两个属性需要注意

  m34:在斜切的视觉中需要设置这个值,这个值用来模拟摄像机到物体的距离,越远则物体越有斜切的感觉。

  灭点:这个点位置为anchorPoint,这个点是用来说明我们视觉最远处交汇的点,像我们看物体越来越远,最终物体交汇到了一点

 

四、隐式动画

  我们在设置background,position等的时候,并没有设置动画,但是其却实现了动画。这就是隐式动画,隐式动画中有些参数用来指定属性

begin,commit,setAnimationDuration,setDisableActions,setCompletionBlock等,比如制定了动画的过渡时间,动画完成后执行的操作等。当然我们是可以指定默认的动画是什么的

  动画选择过程:

  1. 图层首先检测它是否有委托,并且是否实现CALayerDelegate协议指定的-actionForLayer:forKey方法。如果有,直接调用并返回结果
  2. 如果没有委托,或者委托没有实现-actionForLayer:forKey方法,图层接着检查包含属性名称对应行为映射的actions字典。
  3. 如果actions字典没有包含对应的属性,那么图层接着在它的style字典接着搜索属性名。
  4. 最后,如果在style里面也找不到对应的行为,那么图层将会直接调用定义了每个属性的标准行为的-defaultActionForKey:方法。

五、显示动画

  显示动画我们使用了很多,一般可以分为属性动画、过渡动画、自定义动画

  属性动画:CATransaction,CABasicAnimation,CAKeyFrameAnimation,CAAnimationGroup

  过渡动画:

  CATransition.过渡动画一般用于属性动画难以实现的效果,譬如交换两个UIView的层级关系等等

  [UIView transitionFromView: toView: duration: options: completion:]这个过渡动画相较于上面的过渡动画提供了其它的动画效果

  自定义动画:自定义动画的实现一般通过renderInContext获取截屏然后将这个图片加入视图中并对其作动画

 

六、图层时间

  每个图层都有属性来描述动画的相关属性:

  beginTime:动画开始的延长,指定了设置动画后过多久其执行

  speed:动画的执行速度

  timeOffset:动画直接跳到相应时间点的位置

  这里我们有个很有趣的动画效果,我们可以通过设置speed为0,然后通过timeOffset来实现一帧一帧变化的动画。

  

 

七、缓冲

  所谓的缓冲就是指动画执行过程中的来回反弹类似弹簧的效果,或者说由快到慢,由慢到快到动态。常用的缓冲方式由以下几种

  CAMediaTimingFunction:系统提供的时间缓冲函数,功能有限只提供了三次的贝塞尔曲线

  CAKeyFrameAnimation:关键帧动画,通过不断的设定关键帧的values,keyTimes,timingFunctions来模拟更复杂的时间缓冲函数、

  插值方式:我们把动画分割成更小的几部分,那么我们就可以用直线来拼接这些曲线。这里其实把所有的关键帧的计算都归结为一个对时间的差值运算。而这个插值运算的函数的推导并不简单。

 

八、CAShapeLayer

  功能:用于绘制不规则的图层。结合paintCode工具使用

  主要参数:path,strokeStart,strokerEnd

  常见使用场景:不规则图层、用于图层的不规则遮罩、进度条

 

九、CAGradientLayer

  功能:用于绘制具有渐变效果的图层

  主要参数:startPoint、endPoint、locations、colors

  常见使用场景:渐变遮罩,渐变色彩

 

十、CAReplicatorLayer

  功能:用于将子图层进行动态复制呈现。他能够将子图层的动画等完美复制,并且本身提供了呈现形式的控制参数

  主要参数:instanceCount、instanceTransform、instanceDelay、instanceColor

  常见使用场景:需要不断重复出现的场合:音频轨道,映射

 

 

 

 

十一、CAEmitterLayer

  功能:用于实现粒子效果

  主要参数:emitterShape、emitterSize、contents、emitterCells、……

  常见使用场景:抛洒效果,雨雪效果

 

十二、CATransformLayer

  功能:用于表现3D的层次。因为CALayer总是讲最后的呈现效果扁平化

  主要参数:同CALayer一样

  常见使用场景:展现z轴方向上的层次

 

================== 

上面所示例的链接:share.zip