1、锚点的概念 x轴与y轴的取值在0~1之间
- Layer层的position参照点始终参与锚点重合
- 锚点决定视图进行动画时的参照点
2、几种常用的CALayer子类
- CAEmitterLayer类
CAEmitterLayer是一个粒子发射器系统，负责粒子的创建和发射源属性的配置。它可以创建出炫酷的粒子效果动画 - CAGradientLayer类
可以创建色彩渐变的图层效果
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//创建图层对象
let gradientLayer = CAGradientLayer()
//设置图层尺寸与位置
gradientLayer.bounds = CGRect(x: 0, y: 100, width: 100, height: 100)
gradientLayer.position = CGPoint(x: 100, y: 100)
//设置要进行色彩渐变的颜色
gradientLayer.colors = [UIColor.red.cgColor,UIColor.green.cgColor,UIColor.blue.cgColor]
//设置要进行渐变的临界位置 当红色渲染到1/5后开始向绿色进行渐变，绿色渲染到1/2后开始向蓝色进行渐变，当到达7/10距离后完成渐变过程，开始渲染为纯蓝色
gradientLayer.locations = [NSNumber(value: 0.2),NSNumber(value: 0.5),NSNumber(value: 0.7)]
//设置渐变的起始点与结束点 (0,0)左上角 (1,1)右下角
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
//添加视图
self.view.layer.addSublayer(gradientLayer)
}
}
结果：
Simulator Screen Shot - iPhone X - 2019-06-18 at 17.16.30.png
- CAEAGLLayer类
可以通过OpenGL ES来进行界面的绘制 - CAReplicatorLayer类
CAReplicatorLayer是一个图层容器，会对其中的子图层进行复制和属性偏移。可以用来创建类型倒影效果，也可以进行图层的变换复制
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//创建拷贝图层
let replicatorLayer = CAReplicatorLayer()
replicatorLayer.position = CGPoint.zero
//创建内容图层
let subLayer = CALayer()
subLayer.bounds = CGRect(x: 0, y: 0, width: 20, height: 20)
subLayer.position = CGPoint(x: 30, y: 100)
subLayer.backgroundColor = UIColor.red.cgColor
replicatorLayer.addSublayer(subLayer)
//设置每次拷贝将副本沿x轴平移30个单位
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(30, 0, 0)
//设置拷贝副本的个数
replicatorLayer.instanceCount = 10
//添加视图
self.view.layer.addSublayer(replicatorLayer)
}
}
结果：
- CAScrollLayer类
可以让其管理的多个子层进行滑动，但是只能通过代码进行管理，不能进行用户点按触发 - CAShapeLayer类
可以在图层上直接绘制出自定义的形状
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//c创建图层
let shapeLayer = CAShapeLayer()
shapeLayer.position = CGPoint.zero
//创建图形路径
let path = CGMutablePath()
//设置路径起点
path.move(to: CGPoint(x: 100, y: 100))
//进行画线
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 200, y: 200))
path.addLine(to: CGPoint(x: 100, y: 100))
//设置图层路径
shapeLayer.path = path
//设置图形边缘线条起点
shapeLayer.strokeStart = 0
//设置图形边缘线条终点
shapeLayer.strokeEnd = 1
//设置填充规则
shapeLayer.fillRule = CAShapeLayerFillRule.evenOdd
//设置填充颜色
shapeLayer.fillColor = UIColor.red.cgColor
//设置边缘线条颜色
shapeLayer.strokeColor = UIColor.blue.cgColor
//设置边缘线条宽度
shapeLayer.lineWidth = 1
self.view.layer.addSublayer(shapeLayer)
}
}
Simulator Screen Shot - iPhone X - 2019-06-18 at 18.54.35.png
- CATextLayer类
用于进行文字的绘制 - CATiledLayer类
瓦片视图，可以分区域绘制，常用于在一张大的图片中分区域绘制 - CATransformLayer类
用于构建一些图层变化效果，包括3D效果的图层变换
3、CoreAnimation框架中的属性动画
CAAnimation类是CoreAnimation子类，主要分为：CAPropertyAnimation(CABasicAnimation属性过渡动画、CAKeyframeAnimation关键帧属性过渡动画)、CATransition、CAAnimationGroup
- CABasicAnimation属性过渡动画
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
//创建f动画实例，keyPath为要进行属性动画的属性路径 transform.rotation.z表示图形属性中以z轴为中心轴的旋转属性
let basicAni = CABasicAnimation(keyPath: "transform.rotation.z")
//从0度开始旋转
basicAni.fromValue = NSNumber(value: 0)
//旋转到180度
basicAni.toValue = NSNumber(value: Double.pi)
//设置动画播放的时长
basicAni.duration = 2
//将动画作用于当前界面的视图Layer层上
self.view.layer.add(basicAni, forKey: nil)
}
}
- CAKeyframeAnimation关键帧动画
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
//创建f动画实例，keyPath为要进行属性动画的属性路径 transform.rotation.z表示图形属性中以z轴为中心轴的旋转属性
let keyframeAni = CAKeyframeAnimation(keyPath: "transform.rotation.z")
//从0度开始旋转
keyframeAni.values = [NSNumber(value: 0),NSNumber(value: Double.pi/4),NSNumber(value: 0),NSNumber(value: Double.pi)]
//设置动画播放的时长
keyframeAni.duration = 3
//将动画作用于当前界面的视图Layer层上
self.view.layer.add(keyframeAni, forKey: "")
}
}
- CASpringAnimation类似弹簧的阻尼动画
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
//
let springAni = CASpringAnimation(keyPath: "position.y")
//模拟重物质量，必须大于0，默认为1，会影响惯性
springAni.mass = 2
//模拟弹簧劲度系数，必须大于0，这个值越大，则回弹越快
springAni.stiffness = 5
//设置阻尼系数，必须大于0，这个值越大，回弹的幅度越小
springAni.damping = 2
springAni.toValue = 300
springAni.duration = 3
//创建演示动画的Layer
let layer = CALayer()
layer.position = CGPoint(x: 100, y: 100)
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)
layer.add(springAni, forKey: "")
}
}
- CATransition实现转场动画
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
}
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
//创建转场动画实例
let transAni = CATransition()
//设置转场动画类型
transAni.type = CATransitionType.reveal
//设置转场动画方向
transAni.subtype = CATransitionSubtype.fromTop
let layer = CALayer()
layer.position = CGPoint(x: 100, y: 100)
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
layer.add(transAni, forKey: "")
self.view.layer.addSublayer(layer)
}
}
type转场动画属性
//渐入效果
transAni.type = CATransitionType.fade
//移入效果
transAni.type = CATransitionType.moveIn
//压入效果
transAni.type = CATransitionType.push
//溶解效果
transAni.type = CATransitionType.reveal
subtype属性
//从右侧执行
transAni.subtype = CATransitionSubtype.fromRight
//从左侧执行
transAni.subtype = CATransitionSubtype.fromLeft
//从上侧执行
transAni.subtype = CATransitionSubtype.fromTop
//从下侧执行
transAni.subtype = CATransitionSubtype.fromBottom
- CAAnimationGroup组合动画
import UIKit
import ImageIO
class FourViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.orange
}
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
//创建背景色过渡动画
let basicAni = CABasicAnimation(keyPath: "backgroundColor")
basicAni.toValue = UIColor.green.cgColor
//创建形变动画
let basicAni2 = CABasicAnimation(keyPath: "transform.scale.x")
basicAni2.toValue = NSNumber(value: 2)
//i进行动画组合
let groupAni = CAAnimationGroup()
groupAni.animations = [basicAni,basicAni2]
groupAni.duration = 3
let layer = CALayer()
layer.position = CGPoint(x: 100, y: 100)
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = UIColor.red.cgColor
layer.add(groupAni, forKey: "")
self.view.layer.addSublayer(layer)
}
}