iOS Animation - Phần 1: View Animation

Bài đăng này đã không được cập nhật trong 3 năm

Lời nói đầu

Để 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.

Phần 1: View Animation

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ó:

Position và size: bounds, frame, centercenter
Appearance: backgroundColor và alpha
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.