###1、核心动画的基本概述* coreanimation的是 objective - c 的框架,它通过简单的动画编程接口来提供一套高性能的动画引擎。 * 简单易用的高性能混合编程模型。 * 类似视图一样,你可以通过使用图层来创建复杂的接口。 * 轻量级的数据结构,它可以同时显示并让上百个图层产生动画效果。 * **`一套简单的动画接口,可以让你的动画运行在独立的线程里面,并可以独立于主线程之外`**。 * **`一旦动画配置完成并启动,核心动画完全控制并独立完成相应的动画帧`**。 * 提高应用性能。应用程序只当发生改变的时候才重绘内容。再小的应用程序也需要改变和提供布局服务层。核心动画还消除了在动画的帧速率上运行的应用程序代码。 * 灵活的布局管理模型。包括允许图层相对同级图层的关系来设置相应属性的位置和大小。* 核心动画类(caanimation)包含cabasicanimation(基本动画)、catransition(转场动画)、cakeyframeanimation(关键帧动画)、caanimationgrup(动画组),动画的对象是图层(layer)。 * **`cabasicanimation`**:提供了在图层的属性值间简单的动画。 * **`cakeyframeanimation`**: 提供支持关键帧动画。你指定动画的一个图层属性的关键路径,一个表示在动画的每个阶段的价值的数组,还有一个关键帧时间的数组和时间函数。 * **`catransition`**:提供了一个影响整个图层的内容过渡效果。在动画显示过程中采用淡出(fade)、推出(push)、显露(reveal)图层的内容。 * **`caanimationgroup`**: 允许一系列动画效果组合在一起,并行显示动画。 ###2、基本动画(cabasicanimation)cabasicanimation 用于实现layer属性值从一个值(fromvalue)到另外一个值(tovalue)变化的简单动画,比如旋转、缩放、逐渐透明、移动等。* **基本使用** 1. 创建动画并设置动画要改变的属性 ``` cabasicanimation *animation = [cabasicanimation animation]; [animation setkeypath:@transform.scale]; // 或者 cabasicanimation *animation = [cabasicanimation animationwithkeypath:@transform.scale]; ``` 2. 设置动画属性 ``` animation.fromvalue = @1.0; animation.tovalue = @0.5; animation.duration = 0.5; animation.autoreverses = yes; animation.repeatcount = 10; ``` 3. 添加动画到图层 ``` [aniview.layer addanimation:animation forkey:@ani_scale]; ```* **动画的属性** * **`fromvalue`**：属性的起始值,id类型。 * **`tovalue`**：属性的目标值,id类型。 * **`byvalue`**：属性要变化的值，也就是fromvalue到tovalue所改变的值。 * **`duration`**：动画的持续时间。 * **`autoreverses`**：动画是否有恢复动画。 * **`repeatcount`**：动画重复次数,设置为huge_valf表示无限次。 * **`removedoncompletion`**：是否回到初始状态,要设置fillmode为kcafillmodeforwards才起效果。 * **`fillmode`**：非动画时的状态。 * **`speed`**：动画的速度，默认1.0，设为2.0就是两倍的速度完成动画。 * **`timingfunction`**：动画速度变化控制函数包含(linear、easein、easein、easeineaseout)。 * **`timeoffset`**：动画的时间偏移。 * **`begintime`**：动画开始的时间，为cacurrentmediatime() + 延迟秒数。 * **`cacurrentmediatime()`**：当前媒体时间，可以用于动画暂停和开始的时间记录。这个绝对时间就是将mach_absolute_time()(mach_absolute_time是一个cpu/总线依赖函数，返回一个基于系统启动后的时钟”嘀嗒”数。)转换成秒后的值.这个时间和系统的uptime有关,系统重启后cacurrentmediatime()会被重置。 * **暂停动画**```- (void)pauseanimation{ cftimeinterval stoptime = [_aniview.layer converttime:cacurrentmediatime() fromlayer:nil]; // 动画暂停时的媒体时间 _aniview.layer.timeoffset = stoptime; // 将偏移的时间定格在暂停时 _aniview.layer.speed = 0.0; // 将速度设为0}```* **继续动画**```- (void)recoveranimation{ cftimeinterval stoptime = _aniview.layer.timeoffset; _aniview.layer.timeoffset = 0; // 重置动画的时间偏移 _aniview.layer.speed = 1.0; // 恢复动画的速度 _aniview.layer.begintime = 0; // 将begintime清0 _aniview.layer.begintime = [_aniview.layer converttime:cacurrentmediatime() fromlayer:nil] - stoptime; // 从新设置begintime,这个时间就是暂停了多久的秒数。}```参考：[how to pause the animation of a layer tree](https://developer.apple.com/library/ios/qa/qa1673/_index.html)###3、关键帧动画(cakeyframeanimation)cakeyframeanimation 可以给一个图层提供多个目标值(values)或者一个指定路径(path)的动画。关键帧动画有如下几个重要参数：**`values`：**指定图层属性(position、scale、rotation...)的多个目标值,这个图层就会由这些指定的值进行动画。**`path`：**一个`cgpathref`类型的路径，指定图层就会沿着这个路径进行动画。**`keytimes`：**关键帧指定对应的时间点,其取值范围为0到1.0。也就是keytimes中的每一个时间值都对应values中的每一帧.当keytimes没有设置的时候,各个关键帧的时间平分。 **`calculationmode`：**关键帧之间的插值计算模式,有如下几种： kcaanimationlinear(线性的，两帧之间连续显示) kcaanimationdiscrete(离散的,只在关键帧处显示) kcaanimationpaced(强制步调一致的，keytimes和timingfunctions设置无效) kcaanimationcubic(两帧过度是圆滑曲线的) kcaanimationcubicpaced(圆滑过度并且步调一致)* **多个目标值的动画**: 1. 创建一个改变position的关键帧动画并设置它的基本属性 ``` cakeyframeanimation *animation = [cakeyframeanimation animationwithkeypath:@position]; animation.duration = duration; animation.removedoncompletion = no; animation.fillmode = kcafillmodeforwards; animation.repeatcount = 10; ``` 2. 指定多个目标点并设置每帧对应的时间点 ``` nsvalue *value1 = [nsvalue valuewithcgpoint:cgpointmake(0, tsreenheight/2)]; nsvalue *value2 = [nsvalue valuewithcgpoint:cgpointmake(tsreenweight/2, 0)]; nsvalue *value3 = [nsvalue valuewithcgpoint:cgpointmake(tsreenweight, tsreenheight/2)]; nsvalue *value4 = [nsvalue valuewithcgpoint:cgpointmake(tsreenweight/2, tsreenheight)]; nsvalue *value5 = [nsvalue valuewithcgpoint:cgpointmake(0, tsreenheight/2)]; nsarray *values = @[value1,value2,value3,value4,value5]; animation.values = values; animation.keytimes = @[@0,@.3,@.6,@.7,@1]; ``` 3. 添加动画到指定的图层 ``` [_ballimageview.layer addanimation:rotationanim forkey:nil]; ```* **指定路径的动画:** 1. 创建一个改变position的关键帧动画并设置它的基本属性 ``` cakeyframeanimation *animation = [cakeyframeanimation animationwithkeypath:@position]; animation.duration = duration; animation.removedoncompletion = no; animation.fillmode = kcafillmodeforwards; animation.repeatcount = 10; ``` 2. 设置一个贝塞尔曲线的动画路劲path ``` uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(0, 160)]; cgpoint endpoint1 = cgpointmake(160, 160); cgpoint endpoint2 = cgpointmake(320, 160); cgpoint controlpoint = cgpointmake(80, 0); cgpoint controlpoint2 = cgpointmake(240, 320); [path addquadcurvetopoint:endpoint1 controlpoint:controlpoint]; [path addquadcurvetopoint:endpoint2 controlpoint:controlpoint2]; ``` 3. 添加动画到图层 ``` [imgview.layer addanimation:keyanimation forkey:nil]; ```###4、转场动画(catransition)catransition 用于视图的页面切换、页面更新时的转场动画，提供了多种type和subtype转场效果。* **type属性：** 转场动画效果（`api中公开的效果只有fade、movein、push、reveal四种，其他为私有`）。 1. **`fade`** 淡出效果 2. **`movein`** 进入效果 3. **`push`** 推出效果 4. **`reveal`** 移出效果 5. **`cube`** 立方体翻转效果 6. **`suckeffect`** 抽走效果 7. **`rippleeffect`** 水波效果 8. **`pagecurl`** 翻开页效果 9. **`pageuncurl`** 关闭页效果 10. **`camerairishollowopen`** 相机镜头打开效果 11. **`camerairishollowclose`** 相机镜头关闭效果* **subtype属性：** 转场的动画方向 1. **`fromleft` 或 `kcatransitionfromleft`** 从左过度 2. **`fromright` 或 `kcatransitionfromright`** 从右过度 3. **`fromtop` 或 `kcatransitionfromtop`** 从上过度 4. **`frombottom` 或 `kcatransitionfrombottom`** 从下过度 * **实例代码：** ``` catransition *animation = [catransition animation]; animation.duration = 0.5; animation.type = @movein; // 或者 animation.type = kcatransitionmovein; animation.subtype = @fromleft; // 或者 animation.subtype = kcatransitionfromleft [self.photoview.layer addanimation:self.animation forkey:nil]; ```###5、动画组(caanimationgrup)caanimationgrup 可以为一个layer添加多个动画效果，要实现复杂的动画可以使用用动画组的方式给layer添加动画。* 实例代码 1. 创建多个动画 ``` // 旋转动画 cabasicanimation *rotation = [cabasicanimation animationwithkeypath:@transform.rotation]; rotation.duration = 3; rotation.byvalue = @(2 * m_pi); // 缩放动画 cabasicanimation *scale = [cabasicanimation animationwithkeypath:@transform.scale]; scale.duration = 3; scale.byvalue = @2; // 变透明动画 cabasicanimation *opacity = [cabasicanimation animationwithkeypath:@opacity]; opacity.duration = 3; opacity.byvalue = @-1; // 圆角变化动画 cabasicanimation *cornerradius = [cabasicanimation animationwithkeypath:@cornerradius]; cornerradius.duration = 3; cornerradius.byvalue = @75; // 关键帧动画 cakeyframeanimation *keyanimation = [cakeyframeanimation animationwithkeypath:@position]; keyanimation.duration = 3; nsvalue *value1 = [nsvalue valuewithcgpoint:cgpointmake(0, tsreenheight/2)]; nsvalue *value2 = [nsvalue valuewithcgpoint:cgpointmake(tsreenweight/2, 0)]; nsvalue *value3 = [nsvalue valuewithcgpoint:cgpointmake(tsreenweight, tsreenheight/2)]; nsvalue *value4 = [nsvalue valuewithcgpoint:cgpointmake(tsreenweight/2, tsreenheight)]; nsvalue *value5 = [nsvalue valuewithcgpoint:cgpointmake(0, tsreenheight/2)]; nsarray *values = @[value1,value2,value3,value4,value5]; keyanimation.values = values; keyanimation.calculationmode = kcaanimationcubic; ``` 2. 创建一个动画组，组合多个动画 ``` caanimationgroup *anigroup = [caanimationgroup animation]; anigroup.duration = 3; anigroup.repeatcount = huge_valf; anigroup.animations = @[rotation, scale, opacity, cornerradius, keyanimation]; [self.aniview.layer addanimation:anigroup forkey:nil]; ```###6、动画画轨迹(cashapelayer添加动画)cashapelayer 是 calayer 的子类，可以根据设定的path画出对应的图形、曲线等，还可以添加动画，实现动画画图。* **cashapelayer属性：** 1. **`path`：** 图像所依赖的路径，cgpathref类型 2. **`fillcolor`：** 图形填充颜色 3. **`fillrule`：** 填充的类型 4. **`strokecolor`：**描边的颜色 5. **`linewidth`**：线条的宽度 6. **`linecap`：** 线条端点的样式 7. **`linejoin`：** 两个链接点的样式 8. **`miterlimit`:** 两条线连接时斜接的长度 9. **`strokestart`:** 绘制的起点，取值范围[0~1],默认0 10. **`strokeend`：** 绘制的终点，取值范围[0~2],默认1* **cashapelayer画图：**``` // 1.创建条内切圆路径 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(0, 0, 200, 200)]; // 2.创建cashapelayer图层并设置属性 cashapelayer *shapelayer = [cashapelayer layer]; shapelayer.frame = cgrectmake(0, 0, 200, 200); shapelayer.path = path.cgpath; shapelayer.fillcolor = [uicolor clearcolor].cgcolor; shapelayer.strokecolor = [uicolor redcolor].cgcolor; shapelayer.linewidth = 10.0f; shapelayer.linecap = kcalinecapround; shapelayer.strokestart = 0.25; shapelayer.strokeend = 1; // 3.添加图层 [self.view.layer addsublayer:shapelayer];```* **cashapelayer添加动画：**``` // 4.给shapelayer的strokestart 或者 strokeend 属性添加动画，就可以实现动画画图了。 cabasicanimation *animation = [cabasicanimation animationwithkeypath:@strokeend]; animation.removedoncompletion = no; animation.fillmode = kcafillmodeforwards; animation.duration = 3; animation.fromvalue = @0; animation.tovalue = @1; [shapelayer addanimation:animation forkey:@ani_strokestart];```###7、核心动画demo####demo下载地址:[https://github.com/fuqinglin/coreanimationdemos.git](https://github.com/fuqinglin/coreanimationdemos.git)