Giới thiệu: EasyAnimation, đơn giản hóa animation trong iOS
Bài đăng này đã không được cập nhật trong 3 năm
Hàm "UIView.animateWithDuration:animations:" rất quen thuộc và dễ sử dụng để tạo các chuyển động của view. Nhược điểm của nó là không thao tác được với layer, và không get được đối tượng để handle về sau.
EasyAnimation đã giải quyết chuyện đó, giúp mọi chuyện với animation lại càng dễ dang hơn.
Easy Layer Animations
EasyAnimation hỗ trợ việc animation với layer mà không cần phải sử dụng "CABasicAnimation". Chỉ cần mô tả trạng thái cuối cùng của Layer trong block "animation:".
// Sử dụng CABasicAniamtion
let anim = CABasicAnimation(keyPath: "position.x")
anim.fromValue = 100.0
anim.toValue = 200.0
anim.duration = 2.0
view.layer.addAnimation(anim, forKey: nil)
// Sử dụng EasyAnimation
UIView.animate(duration: 2.0, animations: {
self.view.layer.position.x = 200.0
})
Kết quả:
Cần thêm chút delay, option hoặc curve cộng thêm animation bo tròn:
// Sử dụng CABasicAnimation
let anim = CABasicAnimation(keyPath: "position.x")
anim.fromValue = 100.0
anim.toValue = 200.0
anim.duration = 2.0
anim.fillMode = kCAFillModeBackwards
anim.beginTime = CACurrentMediaTime() + 2.0
anim.timingFunction = CAMediaTimingFunction(name:
kCAMediaTimingFunctionEaseOut)
anim.repeatCount = Float.infinity
anim.autoreverses = true
view.layer.addAnimation(anim, forKey: nil)
let anim2 = CABasicAnimation(keyPath: "cornerRadius")
anim2.fromValue = 0.0
anim2.toValue = 20.0
anim2.duration = 2.0
view.layer.addAnimation(anim2, forKey: nil)
// Sử dụng EasyAnimation
UIView.animate(duration: 2.0, delay: 2.0,
options: [.repeat, .autoreverse, .curveEaseOut],
animations: {
self.view.layer.position.x += 200.0
self.view.layer.cornerRadius = 20.0
self.view.layer.borderWidth = 5.0
}, completion: nil)
Kết quả:
Với block "completion:", đỡ phải sử Delegate để bắt khi nào animation xong.
Hoặc với Spring Animation:
// Sử dụng EasyAnimation
UIView.animate(duration: 2.0, delay: 0.0,
usingSpringWithDamping: 0.25,
initialSpringVelocity: 0.0,
options: [],
animations: {
self.view.layer.position.x += 200.0
self.view.layer.cornerRadius = 50.0
self.view.layer.transform = CATransform3DMakeScale(1.2, 1.2, 1.0)
}, completion: nil)
Với EasyAnimation sẽ dễ dàng thao tác với layer animation hơn, ko cần tạo nhiều đối tượng animation cho từng thuộc tính hay CAAnimationGroup để nhóm CABasicAnimation lại.
Chain Animations
EasyAnimation hỗ trợ kết hợp nhiều animation lại thành với nhau. Gọi animateAndChain(duration:delay:options:animations:completion:) và cứ thêm animation bằng lệnh animate(duration:animations...)...
UIView.animateAndChain(duration: 1.0, delay: 0.0,
options: [], animations: {
self.view.center.y += 100
}, completion: nil).animate(duration: 1.0, animations: {
self.view.center.x += 100
}).animate(duration: 1.0, animations: {
self.view.center.y -= 100
}).animate(duration: 1.0, animations: {
self.view.center.x -= 100
})
Note: animateAndChain không thể add animation bất cứ lúc nào tùy thích. Bạn chỉ có thể lên kế hoạch cho nó và cho nó và cho nó chạy, không thểm thêm hoặc bớt sau đó được. (Nếu muốn dừng chain animation đó lại và tạo một chainAnimation mới)
Cancel Chain Animations
Nếu muốn dừng animation bất cứ lúc nào, chỉ cần get object và gọi hàm cancelAnimationChain để dừng bất cứ khi nào.
let chain = UIView.animateAndChain(duration: 1.0, delay: 0.0,
options: [], animations: {
self.square.center.y += 100
}, completion: nil).animate(duration: 1.0, animations: {
[... the rest of the animations in the chain]
// cancel animation
chain.cancelAnimationChain()
// cancel animation with Block
chain.cancelAnimationChain({
self.myView.center = initialPosition
//etc. etc.
})
Bạn có thể sự dụng cancelAnimationChain(block) để thêm việc sử lý sau khi dừng. Animation sẽ không dừng lại ngay mà sẽ dừng sau khi hoàng thành một step animation của nó.
All rights reserved