iOS Animation - Phần 6: Layer Animation

Lời nói đầu

Các phần trước mình đã giới thiệu về các cách tạo ra Animation trên View. Phần tiếp theo này, mình xin được giới thiệu về Layer Animation. Các UIView đều có thuộc tính layer, chúng ta có thể truy cập thuộc tính này bằng lênh sau:

let layer = myView.layer

Các thuộc tính của Layer có thể dùng để tạo Animation bao gồm:

1. Size và Position: bounds, position, transform
2. Border: borderColor, borderWidth, cornerRadius
3. Shadow: shadowOffset, shadowOpacity, shadowPath, shadowRadius
4. Contents: contents, mask, opacity

Animation cơ bản

Chúng ta có thể sử dụng CABasicAnimation để tạo ra các animation với các thuộc tính có thể animation phía trên. Ví dụ: muốn tạo animation cho x của thuộc tính position từ x = -100, đến x = 100, trong khoảng thời gian là 0.5s.

1. Tạo một object của CABasicAnimation để thay đổi position.x

let positionAnimation = CABasicAnimation(keyPath: "position.x")
positionAnimation.fromValue = -100 
positionAnimation.toValue = 100
positionAnimation.duration = 0.5

2. Áp dụng animation vừa tạo vào một đối tượng view

view.layer.add(positionAnimation, forKey: nil)

Animation delegates

Chúng ta có thể nhận các delegates callback khi bắt đầu và kết thúc animation.

func animationDidStart(_ anim: CAAnimation)
func animationDidStop(_ anim: CAAnimation, finished flag: Bool)

Để nhận được 2 delegates callback này thiết lập thuộc tính delegate cho object animation đã tạo ra trước đó.

positionAnimation.delegate = self

Tạo nhiều animation đồng thời

Để có thể có nhiều animation đồng thời lên một đối tượng, đơn giản chúng ta có thể tạo ra nhiều basic animation và áp dụng các animations vào cùng một đối tượng view.

let positionAnimation = CABasicAnimation(keyPath: "position.y")
positionAnimation.fromValue = 20
positionAnimation.toValue = 100
positionAnimation.duration = 1.0
view.layer.add(positionAnimation, forKey: nil)

let fadeAnimation = CABasicAnimation(keyPath: "opacity")
fadeAnimation.fromValue = 0.2
fadeAnimation.toValue = 1.0
fadeAnimation.duration = 0.8
view.layer.add(fadeAnimation, forKey: nil)

Phần tiếp theo

Phần tiếp trong loạt bài iOS animation của mình sẽ về Groups and Advanced Timing, đây là phương pháp giúp chúng ta tạo ra được các animation đồng bộ theo thời gian.