iOS CALayer动画

来源：互联网发布：淘宝被投诉真假对比编辑：程序博客网时间：2024/06/01 15:31

有很多高大上的动画,但是苦于思路问题没办法做出来吧,这篇文章我们就来看下CALayer

我们先来看下CALayer是个什么东西：The CALayer class manages image-based content and allows you to perform animations on that content. Layers are often used to provide the backing store for views but can also be used without a view to display content. A layer’s main job is to manage the visual content that you provide but the layer itself has visual attributes that can be set, such as a background color, border, and shadow. In addition to managing visual content, the layer also maintains information about the geometry of its content (such as its position, size, and transform) that is used to present that content onscreen. Modifying the properties of the layer is how you initiate animations on the layer’s content or geometry. A layer object encapsulates the duration and pacing of a layer and its animations by adopting the CAMediaTiming protocol, which defines the layer’s timing information. 这是官方的文档说明，我们可以看到：CALayer 类管理基于图像的内容，并允许我们对该内容进行动画。layer通常用于添加可视内容，也可添加没有视图显示的内容。layer的主要工作是管理我们提供的视觉内容，但layer本身就可以设置，如背景色、边框和阴影的视觉属性。除了可以添加可视内容，layer图层也可构造几何图形及其他内容（如图形的位置、大小和变换方式）用来在屏幕上显示这些内容。我们可以通过修改layer图层的属性来实现内容或几何动画。layer图层对象封装的持续时间、动画的速度两者产生的动画遵循 CAMediaTiming 协议，协议来定义图层的计时信息。ps:（需要注意的是layer只能用于展示内容，它并不能响应事件）；

下面是一些layer的属性:

转载请注明出处

隐式属性动画的本质是这些属性的变动默认隐含了CABasicAnimation动画实现，详情大家可以参照Xcode帮助文档中“Animatable Properties”一节。

在CALayer中很少使用frame属性，因为frame本身不支持动画效果，通常使用bounds和position代替。CALayer中透明度使用opacity表示而不是alpha；中心点使用position表示而不是center。

anchorPoint属性是图层的锚点，范围在（0~1,0~1）表示在x、y轴的比例，这个点永远可以同position（中心点）重合，当图层中心点固定后，调整anchorPoint即可达到调整图层显示位置的作用（因为它永远和position重合）

假设有一个层大小100*100，现在中心点位置（50,50），由此可以得出frame（0,0,100,100）。上面说过anchorPoint默认为（0.5,0.5），同中心点position重合，此时使用图形描述如图1；当修改anchorPoint为（0,0），此时锚点处于图层左上角，但是中心点poition并不会改变，因此图层会向右下角移动，如图2；然后修改anchorPoint为（1,1,），position还是保持位置不变，锚点处于图层右下角，此时图层如图3。

转载请注明出处

下面是个简单的例子，我们使用两个layer：一个只有填充颜色，另外一个我们使用bounds、position、cornerRadius做一个简单动画出来，下面上代码：

转载请注明出处

基本上layer的动画用上述的属性就可以做出好多动画了，可以自己构想原理，利用属性做出自己想要的动画；

另外：我们还可在layer上绘制出各种我们想要的图形，只要你知道原理~下面就说下怎么绘制图形；

绘图的话我们要使用的是Quartz 2D，要知道我们绘制需要一个layer对象，而每个控件上都会有layer，可以使用图层代理 drawLayer:inContext: 或者重写 drawInContext:(注意：这里的layer是你自定义的)方法绘制，需要注意 drawLayer:inContext: 虽然是代理方法但是不用手动实现CALayerDelegate，因为CALayer定义中给NSObject做了分类扩展，所有的NSObject都包含这个方法。另外设置完代理后必须要调用图层的setNeedDisplay方法，否则绘制的内容无法显示。下面我们就来看下是如何构造图形的：

转载请注明出处

我们可以看到官方给我们提供了一系列的函数来绘制图形，但是一些复杂的图形还是要我们一笔笔绘制(其实构造图形还是CAShapeLayer + UIBezierPath比较厉害，而且CAShapeLayer比CaLayer要灵活很多，感兴趣的可以搜一下)。那我们现在可以给绘制图形加个动画，但之前我们还需要了解Core Animation，在iOS中核心动画分为几类：基础动画（CABasicAnimation）、关键帧动画（CAKeyframeAnimation）、动画组（CAAnimationGroup）、转场动画（CATransition）。各个类的关系大致如下：

转载请注明出处

我们平常使用的简单的UIView动画就属于属性动画，属性动画还有基础动画、关键帧动画、隐式动画，它们都是通过修改属性来由系统计算产生。下面我们就来看下怎么利用CABasicAnimation实现简单的平移：

转载请注明出处

我们可以借此实现平移，但是如果是这种简单的动画的话我们完全可以使用隐式动画做出来这里只是方便学习。另外还有其他动画属性：transform.rotation.z、lineWidth、strokeStart、strokeEnd、transform.scale等等（还有好多，这里不说了），都可以自己去试下；

接下来我们看下转场动画：转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤：

1.创建转场动画

2.设置转场类型、子类型（可选）及其他属性

3.设置转场后的新视图并添加动画到图层

我们来看下表格说明：

转载请注明出处

我们来看下简单的代码：

转载请注明出处

这样我们就简单的完成了转场的动画，可以自己换个类型测试下看下效果其实很简单~；

另外：动画组（CAAnimationGroup）的话我们可能在做动画的时候不单单只有一种动画，所以我们可已用CAAnimationGroup类对象的的animations属性将多个动画使用数组包裹起来，然后添加到一个layer上即可执行动画了；

想要demo的可以私信我；

1 0