[iOS] – Ai cũng có thể làm Animation (Part 2)

1K

Như phần trước, mình đã đề cập đến những khái niệm cơ bản về animation trong iOS. Với phần này, mình sẽ đi sâu hơn về các thuộc tính và hiệu ứng của UIView để làm ra một animation đẹp mắt.

Một số thuộc tính cơ bản của UIView.animation

UIView.animate(duration: 1, usingSpringWithDamping: 0.2, initSpringVelocity: 0, delay: 0, options: [], animations: { 
self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
}, completion: nil)

withDuration: giá trị TimeInterval (typealias cho Double) thời gian thực hiện animation tính bằng giây.

delay: độ trễ tính bằng giây (TimeInterval cũng vậy) trước khi animation bắt đầu. Nếu bạn muốn bắt đầu hoạt hình ngay lập tức, bạn có thể bỏ qua tham số này (chỉ trong một số trường hợp nhất định) hoặc đặt thành 0.

usingSpringWithDamping: độ nẩy của view khi gần đến điểm kết thúc( thuộc tính này giống với sự dao động của một vật thể khi được treo trên một cái lò xo trong thực tế).

initSpringVelocity: Tốc độ di chuyển của view bắt đầu ở thời điểm xuất phát.

options: hiệu ứng hoạt hình của view trên quãng đường. Dưới đây là 1 số thuộc tính cơ bản của options:

• .repeat: dùng để lặp lại animation vô hạn.
• .autoreverse: là hiệu ứng view tới điểm kết thúc và trở lại điểm xuất phát.

//Repeate
UIView.animate(duration: 1, options: [.repeat], animations: { 
self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
}, completion: nil)
//Autoreverse
UIView.animate(duration: 1, options: [.autoreverse], animations: { 
self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
}, completion: nil)

• 

• 

• .curveLinear: animation không có sự thay đổi về tốc độ từ khi bắt đầu tới điểm kết thúc.
• .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.

Keyframes giúp tạo các chuỗi animation riêng biệt

Chúng ta có thể sử dụng các UIView.animation chồng lên nhau để tạo thành các chuỗi animation tuy nhiên sẽ gây lộn xộn các dòng code. Mọi việc sẽ trở lên dễ dàng hơn rất nhiều với keyframes hỗ trợ rất tốt xử lý các chuỗi animation kế tiếp nhau.

Tương tự UIView.animation, câu lệnh của keyframe cũng gồm 1 số thuộc tính:

UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: [], animations: {
//add keyframes

}, completion: nil)

• duration : tổng thời gian diễn ra animation.
• options : một danh sách các tuỳ chọn về cách thức animation.
• animations : closure chỉ ra animation các key frames nào.
• completion : khi animation kết thúc, closure này sẽ được thực thi.

Tạo keyframe:

UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
    self.imageView.transform = CGAffineTransform(translationX: 0, y: 200)
})

• relativeStartTime : là thời điểm bắt đầu tính theo % trên tổng thời gian diễn ra animation. RelativeStartTime có giá trị 0 -> 1. Ví dụ: relativeStartTime = 0.2 -> animation sẽ bắt đầu sau 20% * tổng thời gian animation.
• relativeDuration : là lượng thời gian tương đối tính theo % diễn ra animation cho keyframes với tổng thời gian diễn ra toàn bộ animation. Ví dụ: relativeDuration  = 0.25 tức là animation sẽ diễn ra trong 25% * tổng thời gian animation.
• animations : closure chỉ ra animation đối tượng gì.

Một ví dụ về ứng dụng của keyframe.

            UIView.animateKeyframes(withDuration: 2, delay: 0, options: [], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25, animations: {
                let translation = CGAffineTransform(translationX: 0, y: -200)
                let rotation = CGAffineTransform(rotationAngle: CGFloat.pi)
                self.imageView.transform = translation.concatenating(rotation)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
                self.imageView.transform = CGAffineTransform(translationX: -150, y: 200)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.6, relativeDuration: 0.3, animations: {
                let translation = CGAffineTransform(translationX: 0, y: 0)
                let rotation = CGAffineTransform(rotationAngle: -CGFloat.pi)
                self.imageView.transform = translation.concatenating(rotation)
            })
        }, completion: nil)

Phần tiếp theo, mình sẽ giới thiệu về UIView.transtion.
Cảm ơn mọi người đã ghé đọc bài viết của mình 🙂