Fork me on GitHub

iOS动画(三):核心动画中缩放和旋转(Swift)

原理和上一篇是相同的,不同之处是keyPath属性,缩放时是keyPathtransform.scale,旋转时keyPathtransform.rotation

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
class ScaleRotationViewController: UIViewController {
// 用于缩放的layer
lazy var redLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 125, y: 150), backgroundColor: UIColor.red)
}()

lazy var greenLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 125, y: 250), backgroundColor: UIColor.green)
}()

lazy var cyanLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 125, y: 350), backgroundColor: UIColor.cyan)
}()

lazy var blueLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 125, y: 450), backgroundColor: UIColor.blue)
}()

// 用于旋转的Layer
lazy var redRotationLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 300, y: 150), backgroundColor: UIColor.red)
}()

lazy var greenRotationLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 300, y: 250), backgroundColor: UIColor.green)
}()

lazy var cyanRotationLayer: CALayer = {
return self.createLayer(position: CGPoint(x: 300, y: 350), backgroundColor: UIColor.cyan)
}()




override func viewDidLoad() {
super.viewDidLoad()

// 添加缩放的动画
redLayer.add(createAnimation(keyPath: "transform.scale.x", toValue: 0.5), forKey: nil)

greenLayer.add(createAnimation(keyPath: "transform.scale.y", toValue: 0.5), forKey: nil)

cyanLayer.add(createAnimation(keyPath: "transform.scale.z", toValue: 0.5), forKey: nil)

blueLayer.add(createAnimation(keyPath: "transform.scale", toValue: 0.5), forKey: nil)



// 添加旋转的动画
redRotationLayer.add(createAnimation(keyPath: "transform.rotation.x", toValue: CGFloat(Double.pi / 4)), forKey: nil)

greenRotationLayer.add(createAnimation(keyPath: "transform.rotation.y", toValue: CGFloat(Double.pi / 4)), forKey: nil)

cyanRotationLayer.add(createAnimation(keyPath: "transform.rotation.z", toValue: CGFloat(Double.pi / 4)), forKey: nil)


self.creatLabel(title: "缩放", frame: CGRect(x: 100, y: 80, width: 50, height: 20))
self.creatLabel(title: "旋转", frame: CGRect(x: 250, y: 80, width: 50, height: 20))
self.creatLabel(title: "X轴", frame: CGRect(x: 20, y: 125, width: 50, height: 20))
self.creatLabel(title: "Y轴", frame: CGRect(x: 20, y: 225, width: 50, height: 20))
self.creatLabel(title: "Z轴", frame: CGRect(x: 20, y: 325, width: 50, height: 20))
self.creatLabel(title: "XYZ轴", frame: CGRect(x: 20, y: 425, width: 50, height: 20))
}


// 创建calayer
func createLayer (position: CGPoint, backgroundColor: UIColor) -> CALayer {
//创建calayer
let layer = CALayer()
//设置位置和大小
layer.position = position
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
//设置背景颜色
layer.backgroundColor = backgroundColor.cgColor
//把layer添加到UIView的layer上
self.view.layer.addSublayer(layer)

return layer
}

// 创建基础Animation
func createAnimation (keyPath: String, toValue: CGFloat) -> CABasicAnimation {
//创建动画对象
let scaleAni = CABasicAnimation()
//设置动画属性
scaleAni.keyPath = keyPath

//设置动画的起始位置。也就是动画从哪里到哪里。不指定起点,默认就从positoin开始
scaleAni.toValue = toValue

//动画持续时间
scaleAni.duration = 2;

//动画重复次数
scaleAni.repeatCount = Float(CGFloat.greatestFiniteMagnitude)

return scaleAni;
}


//创建Label
fileprivate func creatLabel (title: String, frame: CGRect) -> (){
let label = UILabel()

label.text = title
label.frame = frame
label.textColor = UIColor.darkGray
label.font = UIFont.systemFont(ofSize: 12)

self.view.addSubview(label)

}
}

代码: 89-Animation/CABasic Animation

参考:第五篇:CABasic Animation。iOS动画系列之五:基础动画之缩放篇&旋转篇


--------------------本文结束👨‍💻感谢您的阅读--------------------
坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文标题: iOS动画(三):核心动画中缩放和旋转(Swift)
  • 本文作者: AndyRon
  • 发布时间: 2017年09月05日 - 13:04
  • 最后更新: 2018年12月24日 - 19:50
  • 本文链接: http://andyron.com/2017/ios-animation-3.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!
0%