三种动画对比(frame/transform/snapkit)
2021-03-05 本文已影响0人
小明2021
今天调研一下 移动、缩放动画,分别使用 frame / snapkit / transform 三种方式的实现方式。
=============================
结论:
不同动画不同场景适合的技术是不一样的,最好对三种动画都熟悉掌握,开发起来应对不同场景,事半功倍~
缩放动画:
特别是子视图比较多的情况下,用transform 事半功倍,简单许多。
transform > (frame = snapkit)
移动动画:
snapkit动画比较方便,只需更改一个视图位置,其他跟它关联的视图就自动更改了。
snapkit > (transform = frame)
=============================
核心代码:
下面是针对三个UIView做的动画
层级关系是:
self.view.addSubview(view1)
view1.addSubview(view2)
self.view.addSubview(view3)
view3依赖于view1的位置布局
缩放动画代码如下:
transform (*****)
// MARK: - 缩放
func zoomAction() {
self.view1.transform = .identity
self.view1.setCustomAnchorPoint(anchorP: CGPoint(x: 1.0, y: 1.0))
UIView.animate(withDuration: 3) {
self.view1.transform = CGAffineTransform.init(scaleX: 0.01, y: 0.01)
} completion: { _ in
self.view1.setCustomAnchorPoint()
self.view1.isHidden = true
}
}
frame (**)
// MARK: - 缩放
func zoomAction() {
UIView.animate(withDuration: 3) {
self.view1.frame = CGRect(x: 10 + 200, y: 100 + 200, width: 0, height: 0)
self.view2.frame = CGRect(x: 10, y: 10, width: 0, height: 0)
} completion: { _ in
}
}
snapkit (*)
// MARK: - 缩放
func zoomAction() {
self.view.layoutIfNeeded()
UIView.animate(withDuration: 3) {
self.view1.snp.updateConstraints { (make) in
make.left.equalToSuperview().offset(10 + 200)
make.top.equalToSuperview().offset(100 + 200)
make.width.height.equalTo(0)
}
self.view2.snp.updateConstraints { (make) in
make.left.equalToSuperview().offset(10)
make.top.equalToSuperview().offset(10)
make.width.height.equalTo(0)
}
self.view.layoutIfNeeded()
} completion: { _ in
}
}
移动动画代码如下:
snapkit (****)
// MARK: - 移动
func moveAction() {
self.view.layoutIfNeeded()
UIView.animate(withDuration: 3) {
self.view1.snp.updateConstraints { (make) in
make.left.equalToSuperview().offset(10 + 50)
make.top.equalToSuperview().offset(100 + 50)
}
self.view.layoutIfNeeded()
} completion: { _ in
}
}
transform (**)
// MARK: - 移动
func moveAction() {
self.view1.transform = .identity
self.view3.transform = .identity
UIView.animate(withDuration: 3) {
self.view1.transform = CGAffineTransform.init(translationX: 50, y: 50)
self.view3.transform = CGAffineTransform.init(translationX: 50, y: 50)
} completion: { _ in
}
}
frame (**)
// MARK: - 移动
func moveAction() {
UIView.animate(withDuration: 3) {
self.view1.frame = CGRect(x: 10 + 50, y: 100 + 50, width: 200, height: 200)
self.view3.frame = CGRect(x: self.view1.left, y: self.view1.bottom + 10, width: 100, height: 100)
} completion: { _ in
}
}