一:基本概念
iOS 动画主要是指 Core Animation
框架, 它是 iOS 和 OS X 平台上负责图形渲染与动画的基础框架。Core Animation
可以作用于动画视图或者其他可视元素,可以完成动画所需的大部分绘帧工作。
Core Animation
系统已经进行了封装, 所以在使用的时候你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用 Core Animation
的多种动画效果。
Core Animation
将大部分实际的绘图任务交给了图形硬件(GPU)
来处理,图形硬件会加速图形渲染的速度。
根据实现动画时直接操作对象的类型,我们可以简单的将动画分为:
视图
和图层
两种。
但事实上,无论UIViewAnimaiton动画
还是UIViewAnimaitonWithBlock动画
都只是对UIView的关联图层CALayer动画
的进一步封装。
image.png
1、核心动画简介
CAAnimation
核心动画所在的位置如下图所示:
image.png
可以看到,核心动画位于UIKit
的下一层CAAnimation
,相比UIView动画,它可以实现更复杂的动画效果。
- ①
Core Animation(核心动画)
基于OpenGL
(ios13开始为metal)与CoreGraphics
图像处理框架的一个跨平台的框架,在CoreAnimation
中大部分的动画都是通过Layer
层来实现的,通过CALayer
,我们可以组织复杂的层级结构。- ②
Core Animation(核心动画)
框架是一组功能强大、效果华丽的动画API在开发App中,有大量应用。核心动画作用在CALayer(Core animation layer)
上,我们可以将UIView看成是一种特殊的CALayer(可以响应事件)
。实际上,每一个view都有其对应的layer
,这个layer是root layer
。- ③
Core Animation(核心动画)
可以用在Mac OS X和iOS平台。动画执行过程都是在后台操作的,不会阻塞主线程。直接作用在CALayer上的,并非UIView。- ④
Core Animation(核心动画)
CALayer的addAnimation:forKey:
方法增加CAAnimation
对象到CALayer
中,这样就能开始执行动画了。通过调用CALayer
的removeAnimationForKey:
方法可以停止CALayer
中的动画。
CALayer
:继承于NSObject,所以不具备响应,负责绘制、渲染图形
UIView
: 继承于UIResponder,所以可以进行事件响应,属性CALayer负责图形绘制与渲染。
本质: 给view加上动画,本质上是对其layer进行操作,layer包含了各种支持动画的属性,动画则包含了属性变化的值、变化的速度、变化的时间等等,两者结合产生动画的过程
。
@property(nonatomic,readonly,strong) CALayer * layer;
2、CAAnimation
核心动画的结构图如下图所示:
CAAnimation
是所有动画对象的父类(抽象类,虚类),实现CAMediaTiming协议
,负责控制动画的时间、速度和时间曲线等等,是一个抽象类,不能直接使用。
可以看到,核心动画7个类
和1个协议
。其中只有5个类可以直接用
,另外2个类是抽象类,不可直接使用
。
image.png
综上,核心动画类中可以直接使用的类有5个:
CAAnimationGroup
: 动画组,可以将很多种动画合并到一起,组成动画效果。CATransition
: 转场动画效果。CAKeyframeAnimation
: 关键帧动画效果。values :
一个NSArray对象。里面的元素称为”关键帧”
(keyframe),动画对象会在指定的时间(duration)内,依次显示values
数组中的每一个关键帧
。简单理解为,很多动画帧执行。后面会详解。CABasicAnimation
: 基础动画,简单常见的动画效果。CASpringAnimation
: iOS9.0之后新增,弹簧效果的动画,是CABasicAnimation的子类
。
CAAnimation
的子类和相互关系及属性介绍的比较详细
fromValue: 动画的开始值(Any类型, 根据动画不同可以是CGPoint、NSNumber等)
toValue: 动画的结束值, 和fromValue类似
beginTime: 动画的开始时间
duration : 动画的持续时间
repeatCount : 动画的重复次数
fillMode: 动画的运行场景
isRemovedOnCompletion: 完成后是否删除动画
autoreverses: 执行的动画按照原动画返回执行
path:关键帧动画中的执行路径
values: 关键帧动画中的关键点数组
animations: 组动画中的动画数组
delegate : 动画代理, 封装了动画的执行和结束方法
timingFunction: 控制动画的显示节奏, 系统提供五种值选择,分别是:
1.kCAMediaTimingFunctionDefault( 默认,中间快)
2.kCAMediaTimingFunctionLinear (线性动画)
3.kCAMediaTimingFunctionEaseIn (先慢后快 慢进快出)
4.kCAMediaTimingFunctionEaseOut (先块后慢快进慢出)
5.kCAMediaTimingFunctionEaseInEaseOut (先慢后快再慢)
type: 过渡动画的动画类型,系统提供了多种过渡动画, 分别是:
1: fade (淡出 默认)
2: moveIn (覆盖原图)
3: push (推出)
4: fade (淡出 默认)
5: reveal (底部显示出来)
6: cube (立方旋转)
7: suck (吸走)
8: oglFlip (水平翻转 沿y轴)
9: ripple (滴水效果)
10: curl (卷曲翻页 向上翻页)
11: unCurl (卷曲翻页返回 向下翻页)
12: caOpen (相机开启)
13: caClose (相机关闭)
subtype : 过渡动画的动画方向, 系统提供了四种,分别是:
1.fromLeft( 从左侧)
2.fromRight (从右侧)
3.fromTop (有上面)
4.fromBottom (从下面)
3、UIView 的属性
如下图所示:
image.png
需要注意的是:
- 1,在
CALayer
中很少使用frame属性
,因为frame
本身不支持动画效果,通常使用bounds
和position
代替- 2,
CALayer
中透明度使用opacity
表示而不是alpha
;中心点使用position
而不是center
- 3,
anchorPoint
属性是图层的锚点,范围在(01,01)表示在x、y轴的比例,这个点永远可以同position
(中心点)重合,当图层中心点固定后,调整anchorPoint
。即可达到调整图层显示位置的作用(因为它永远和position重合)
注意:下面着重介绍position
和anchorPoint
image.png
其实anchorPoint
标识对应的比例,如果在边界上那么对应的值就是0。
anchorPoint
的默认值为(0.5,0.5)
,也就是anchorPoint
默认在layer
的中心点。默认情况下,使用addSublayer函数
添加layer时,如果已知layer
的frame
值,根据上面的结论,那么position
的值便可以用下面的公式计算:
position.x = frame.origin.x + anchorPoint.x * bounds.size.width;
position.y = frame.origin.y + anchorPoint.y * bounds.size.height;
4、CALayer 的属性
如下图所示:
image.png
下一篇iOS核心动画详解2会详细介绍这7
个类和1
个协议。
网友评论