简单的移动
新建一个
CALayer。1
2
3
4
5
6
7
8
9
10lazy var redLayer: CALayer = {
return self.createLayer()
}()
func createLayer() -> CALayer {
let redLayer = CALayer()
redLayer.position = CGPoint(x: 200, y: 200)
redLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
redLayer.backgroundColor = UIColor.red.cgColor
return redLayer
}把新建的
CALayer添加的view的layer中。1
view.layer.addSublayer(redLayer)
遵守协议
CAAnimationDelegateclass BasicPostionViewController: UIViewController, CAAnimationDelegate {创建动画
CABasicAnimation,并添加的CALayer中。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19func createCABasicAnimation() -> CABasicAnimation {
let basicAni = CABasicAnimation()
// 设置动画属性
basicAni.keyPath = "position"
basicAni.fromValue = NSValue.init(cgPoint: CGPoint(x: 0, y: 0))
basicAni.toValue = NSValue.init(cgPoint: CGPoint(x: 300, y: 300))
basicAni.duration = 2
basicAni.fillMode = kCAFillModeForwards
basicAni.isRemovedOnCompletion = false
basicAni.delegate = self
return basicAni
}1
2let basicAni = createCABasicAnimation()
self.redLayer.add(basicAni, forKey: "basicPosition")- forKey 是动画对象的名字，只是用来标识，没有特殊意义。
稍微复杂的移动
原理和上面相同，都是先创建CALayer，然后添加CABasicAnimation。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65class BasicPostion2ViewController: UIViewController, CAAnimationDelegate{
lazy var redLayer: CALayer = {
return self.createLayer(postion: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)
}()
lazy var greenLayer: CALayer = {
return self.createLayer(postion: CGPoint(x: 0, y: 250), backgroundColor: UIColor.green)
}()
lazy var cyanLayer: CALayer = {
return self.createLayer(postion: CGPoint(x: 0, y: 350), backgroundColor: UIColor.cyan)
}()
lazy var blueLayer: CALayer = {
return self.createLayer(postion: CGPoint(x: 0, y: 450), backgroundColor: UIColor.blue)
}()
override func viewDidLoad() {
super.viewDidLoad()
redLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 150), toValue: CGPoint(x: 300, y: 150), timingFunction: kCAMediaTimingFunctionLinear), forKey: "basicAnimation")
view.layer.addSublayer(redLayer)
greenLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 250), toValue: CGPoint(x: 300, y: 250), timingFunction: kCAMediaTimingFunctionEaseIn), forKey: "basicAnimation")
view.layer.addSublayer(greenLayer)
cyanLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 350), toValue: CGPoint(x: 300, y: 350), timingFunction: kCAMediaTimingFunctionEaseOut), forKey: "basicAnimation")
view.layer.addSublayer(cyanLayer)
blueLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 450), toValue: CGPoint(x: 300, y: 450), timingFunction: kCAMediaTimingFunctionEaseInEaseOut), forKey: "basicAnimation")
view.layer.addSublayer(blueLayer)
}
func createLayer(postion: CGPoint, backgroundColor: UIColor) -> CALayer {
let layer = CALayer()
layer.position = postion
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.backgroundColor = backgroundColor.cgColor
return layer
}
func createBasicAnimation (fromValue: CGPoint, toValue: CGPoint, timingFunction: String) -> CABasicAnimation {
let basicAni = CABasicAnimation()
basicAni.keyPath = "position"
basicAni.fromValue = fromValue
basicAni.toValue = toValue
basicAni.duration = 2
// basicAni.fillMode = kCAFillModeForwards
// basicAni.isRemovedOnCompletion = false
// 1
basicAni.timingFunction = CAMediaTimingFunction(name: timingFunction)
basicAni.delegate = self
return basicAni
}
}
- 1
timingFunction代表移动模式：kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。
参考：
