iOS Animation - Phần 1: View Animation

Để làm cho 1 ứng dụng trở nên chuyên nghiệp, thân thiện và dễ dùng hơn với người dùng, thì việc lập trình viên biết cách tạo ra và sử dụng các animation hợp lý là rất quan trọng.

iOS có hỗ trợ lập trình viên một số phương thức tạo animation như: View Animation, Auto Layout, Layer Animation, 3D Animation, View Controller Transitions. Mình sẽ trình bày các phương thức trên trong từng phần.

View Animation là phương thức đơn giản nhất để tạo được một animation trong ứng dụng iOS. Tất cả các đối tượng kế thừa từ UIView đều có thể tạo được animation bằng View Animation. Các thuộc tính dùng để tạo animation bằng View Animation gồm có:

1. Position và size: bounds, frame, centercenter
2. Appearance: backgroundColor và alpha
3. Transformation: rotate, scalescale

Sau đây là các lệnh để tạo ra animation

1.AnimateWithDuration

UIView.animateWithDuration(0.5, delay: 0.4, options: [], animations: { self.animatedView.center.y += 100
}, completion: nil)

Trong lệnh trên chúng ta có một số tham số có thể tuỳ chỉnh mà khi thay đổi thì sẽ được các animation khác nhau

• duration: thời gian animation diễn ra
• delay: thời gian trì hoãn bắt đầu animation
• options: một list các tuỳ chọn về cách thức animation. Đây là tham số có ý nghĩa nhất, mình sẽ chi tiết phía dưới.
• animations: closure chỉ ra animation đối tượng gì.
• completion: khi animation kết thúc, closure này sẽ được thực thi.

Animation Options

Repeating

• .Repeat: dùng để lặp lại animation vô hạn Dưới là minh hoạ animation repeate.

• .Autoreverse: option này chỉ dùng kết hợp với option .Repeat để tạo ra animation sau đó là 1 animation ngược lại.

Easing

Trên thực tế các đối tượng không đột ngột di chuyển hay dựng lại. Khi bắt đầu tốc độ sẽ tăng dần, khi kết thúc tốc độ sẽ giảm dần. Để làm cho animation giống với thực tế hơn chúng ta có thể áp dụng các options easing:

• .Linear: Không có sự tăng tốc hay giảm tốc cho animation
• .CurveEaseIn: Tăng tốc khi bắt đầu animation
• .CurveEaseOut: Giảm tốc khi kết thúc animation
• .CurveEaseInOut: Kết hợp của .CurveEaseIn và .CurveEaseOut, tăng tốc khi bắt đầu animation và giảm tốc khi kết thúc animation.

(Phần tiếp theo sẽ về Springs và Transitions. Rất mong nhận được sự đón nhận của các bạn!)

Link tham khảo: Apple Developer Reference