iOS Animation - Phần 7: Layer Animation với Group và Timing

Lời nói đầu

Trong phần trước mình đã giới thiệu về cách tạo ra nhiều animation độc lập, đồng thời trên layer. Trong phần tiếp theo này, mình sẽ giới thiệu đến các bạn kỹ thuật để tạo ra nhiều animation đồng bộ với nhau về mặt thời gian.

Cách tạo animation

1. Khởi tạo đối tượng CAAnimationGroup Để quản lý các animation thành phần, chúng ta sẽ phải cần đến một đối tượng sinh ra từ lớp CAAnimationGroup (một lớp kế thừa từ lớp CAAnimation, mà chúng ta đã làm quen từ phần 6)

let groupAnimation = CAAnimationGroup()
groupAnimation.beginTime = CACurrentMediaTime() + 0.5
groupAnimation.duration = 0.5
groupAnimation.fillMode = kCAFillModeBackwards

• beginTime : thời gian bắt đầu của animation
• duration : thời gian animation diễn ra
• fillMode : cách thức sử lý đối tượng được animation, khi kết thúc animation. Có 4 modes được iOS hỗ trợ bao gồm: kCAFillModeForwards, kCAFillModeBackwards, kCAFillModeBoth, kCAFillModeRemoved.

2. Khởi tạo các animation thành phần Bước tiếp theo, chúng ta sẽ khởi tạo các animation thành phần cần thiết để thực hiện animation như yêu cầu. Ví dụ dưới đây, mình sẽ khởi tạo 3 animations thành phần, độc lập nhau, như chúng ta đã thực hiện ở phần 6.

• Animation scale

let scale = CABasicAnimation(keyPath: "transform.scale") 
scale.fromValue = 3.5
scale.toValue = 1.0

• Animation rotate

let rotate = CABasicAnimation(keyPath: "transform.rotation") 
rotate.fromValue = CGFloat(M_PI_4)
rotate.toValue = 0.0

• Animation fade-in

let fade = CABasicAnimation(keyPath: "opacity") 
fade.fromValue = 0.0
fade.toValue = 1.0

3. Thêm các animation thành phần vào group Chúng ta sẽ phải tạo ra 1 mảng các animation thành phần, và gán mảng đó vào thuộc tính animations của group.

groupAnimation.animations = [scale, rotate, fade]

4. Thêm group animation vào layer của đối tượng cần animation Và cuối cùng, chúng ta thêm group animation và layer của đối tượng cần animation để được animation như mong muốn.

view.layer.addAnimation(groupAnimation, forKey: nil)

Chúng ta sẽ có được đồng thời 3 animations: scale, rotate, fade trên 1 đối tượng.

Một số kỹ thuật nâng cao

1. Easing Chúng ta có thể sử dụng một số mode easing để làm cho animation trở nên thực tế hơn như: Linear, EaseIn, EaseOut, EaseInOutEaseInOut.

groupAnimation.timingFunction = CAMediaTimingFunction( name: kCAMediaTimingFunctionEaseIn)

2. Repeating Chúng ta có thể lặp lại animation một số n lần nếu cần.

groupAnimation.repeatCount = 4.0

3. Speed Chúng ta có thể thay đổi tốc độ của animation, làm cho animation nhanh hơn hoặc chậm hơn nếu muốn.

groupAnimation.speed = 2.0

Phần tiếp theo

Nếu các bạn còn nhớ, trong View Animation có một hiệu ứng là Springs (hiệu ứng dao động lò xo tắt dần). Với việc tạo animation bằng Layer, chúng ta cũng có thể tạo ra được hiệu ứng này. Phần tiếp trong loạt bài iOS animation, mình sẽ là về hiệu ứng Layer Springs.