本期内容:
- CoreAnimation 核心动画简介
- CALayer(图层)简介以及使用
- CAMediaTiming 协议分析以及使用
- CAMediaTimingFunction 效果分析
- CoreAnimation 动画效果:
- 1.基本动画 CABasicAnimation
- 2.关键帧动画 CAKeyframeAnimation
- 3.动画组 CAAnimationGroup
- 4.转场动画 CATransition
CoreAnimation 核心动画
CoreAnimation提供高帧速率和流畅的动画,而不会给CPU带来负担并降低应用程序的速度。绘制动画的每个帧所需的大部分工作都是为我们完成的。我们可以配置动画参数,例如起点和终点,Core Animation会完成其余工作,将大部分工作交给专用图形硬件,以加速渲染。
-
1.核心动画基本概念:CoreAnimation是跨平台的,支持 iOS 和 MacOS。是强大的动画处理API,可以做出非常炫丽的动画效果
-
2.提供的动画类型:
画类型 名称 本动画 CABasicAnimation 键帧动画 CAKeyframeAnimation 画组 CAAnimationGroup 场动画 CATransition -
3.通常的开发步骤:
①初始化一个CAAnimation对象,并设置相关属性
②添加动画对象到层(CALayer)中,(在CALayer的属性中,有很多能实现CAAnimation的动画效果,opacity、position、rtransform、bounds、contents等)
③通过调用CALayer的addAnimation:forKey: 增加动画到层(CALayer)中,这样就能触发动画。通过调用removeAnimationForKey可以停止层的动画
④CAAnimation动画执行过程都是在后台的,不会阻塞主线程
在详细讲解Core Animation之前,先要细说一下CALayer(图层)
CALayer(图层)
图层通常用于为视图提供后备存储,但也可以在没有视图的情况下使用以显示内容。图层的主要工作是管理您提供的可视内容,但图层本身具有可设置的可视属性,例如背景颜色,边框和阴影。除了管理可视内容外,该图层还维护有关其内容几何的信息(例如其位置,大小和变换),用于在屏幕上显示该内容。修改图层的属性是指如何在图层的内容或几何图形上启动动画。层对象通过采用定义层的定时信息的协议来封装层及其动画的持续时间和调步。
-
1.简介:在iOS中,我们所看到的视图UIView是通过QuartzCore中的CALayer显示出来的,我们所需要做的动画效果也是在CALayer上完成的。UIView继承自UIResponder,主要特点是可以响应触摸事件。CALayer实际的图层内容管理。每个UIView内部都有一个Layer的属性。
-
2.和Core Animation的关系:图层类是Core Animation的基础,它提供了一套抽象概念。CALayer是整个图层类的基础,它是所有核心动画图层类的父类。
-
3.基本属性:
属性 | 释义 |
---|---|
bounds | 宽度和高度 |
position | 位置(默认指中心点,具体由anchorPoint决定) |
anchorPoint | 锚点(x,y的范围都是0-1),决定了position的含义 |
backgroundColor | 背景颜色(CGColorRef类型) |
borderColor | 边框颜色(CGColorRef类型) |
borderWidth | 边框宽度 |
cornerRadius | 圆角半径 |
contents | 内容(比如设置为图片CGImageRef) |
CALayer和UIView一样都可以使用frame,但是对于动画来说,很多时候是在父视图上进行操作和实现效果但所以最好还是使用bounds和position。
- 4.通常的开发步骤:
// 开始创建自定义图层:
// 1、新建图层
newLayer = [CALayer layer];
// 2、设置图层属性
// 宽度 高度
newLayer.bounds = CGRectMake(self.view.frame.size.width / 2 - 50, 100, 100, 100);
// 背景颜色
newLayer.backgroundColor = [[UIColor greenColor]CGColor];
// 设置内容 contents 为id属性,需要强转
newLayer.contents = (__bridge id _Nullable)([[UIImage imageNamed:@"头像1"]CGImage]);
// 注意:因为框架不同,在设定CA类型的属性的时候,如果使用了UI框架的东西,需要转换比如CGImage、CGColor
// 位置 中心点position 和 UIView的center类似
newLayer.position = CGPointMake(200, 200);
// 锚点 默认数值 0.5 0.5 位于中心点 0.0在左上角,1.1在右下角
// 锚点是用来定义position的 [ 所在位置 ] 的
newLayer.anchorPoint = CGPointMake(1, 1);
// 锚点0.0 图片的frame就成为:(锚点的position.x, 锚点的position.y, w, h)
// 锚点1.1 图片的frame就成为:(锚点的position.x - 视图宽度, 锚点的position.y - 视图高度, w, h)
// 3、把图层添加到当前视图
[self.view.layer addSublayer:newLayer];
- 5.常用动画
①旋转动画
[view.layer setTransform:CATransform3DMakeRotation(M_PI_2, 1, 1, 1)];// 旋转角度、X\Y\Z轴
```swift
②缩放动画
```swift
[view.layer setTransform:CATransform3DMakeScale(0.5, 2, 1)];// 旋转角度、X\Y\Z轴
③平移动画
[view.layer setTransform:CATransform3DMakeTranslation(0, -100, 0)];
- 6.演示效果:
- 7.CALayer的mask属性:mask是一个layer层,并且作为背景层和组成层之间的一个遮罩层通道,默认是nil。并且如果要创建新的layer赋给mask,那么新的layer必须没有superlayer,也不支持含有子mask。mask是个介于背景层和表现层之间的一个遮罩层,如果要创建新的layer赋给这个遮罩层,则这个新layer不能有superlayer,也不能再上面添加子mask。layer的大小和形状是受到mask遮罩层的影响的,可以通过赋给mask层一个新layer,来实现改变layer形状的效果。
CALayer在开发中需要注意的是:
1.CALayer对应的View的Layer是不允许重复创建的,需要新建子CALayer层进去 调用CALayer的addsubLayer。位置和锚点这两个属性比较重要,要做好动画就需要很好的理解这儿两个属性。
2.绘制CALayer 两种方法:
①创建一个CALayer子类,然后覆盖drawInContext:方法,使用Quartz2D API进行绘图。
②设置CALayer的delegate,然后让delegate实现drawLayer:inContext方法进行绘图
⭐️不推荐CALayer绘图,因为CALayer不能响应触发事件。
CAMediaTiming 协议
在制作核心动画时,还需要注意一点,就是CAMediaTiming协议。动画所有跟时间相关的属性(duration, beginTime, repeatCount等)都来自于CAMediaTiming协议,它由CABasicAnimation和CAKeyframeAnimation的父类CAAnimation实现。协议一共定义了8个属性,通过这8个属性就能完全地控制动画时间。
属性 | 释义 |
---|---|
beginTime | 指定接收器相对于其父对象的开始时间(如果适用)。 |
timeOffset | 指定活动本地时间的附加时间偏移。 |
repeatCount | 确定动画重复的次数。 |
repeatDuration | 确定动画重复的秒数。 |
duration | 指定动画的基本持续时间(以秒为单位)。 |
speed | 指定时间从父时间空间映射到接收者的时间空间的方式。 |
autoreverses | 确定接收器在完成时是否反向播放。 |
fillMode | 确定定时对象在其活动持续时间完成后的行为 |