iOS Animation - Phần 4: Key Animations

Lời nói đầu

Phần tiếp theo trong chuỗi bài về Animation trong iOS mình xin giới thiệu với các bạn về cách tạo Animation bằng kỹ thuật Key Animations. Đây là cách chúng ta tạo ra nhiều các animations một cách liên tiếp nhau.

Với cách tạo animation thông thường, chúng ta cũng có thể tạo được các animation liên tiếp nhau, nhưng nó có 1 nhược điểm là sẽ phải tại ra các đoạn code lồng nhau, kết thúc animation này sẽ bắt đầu animation kế tiếp.

UIView.animateWithDuration(0.5, animations: { 
        view.center.x += 200.0
        }, completion: { _ in 
            UIView.animateWithDuration(0.5, animations: {
                view.center.y += 100.0 
                }, completion: { _ in 
                    UIView.animateWithDuration(0.5, animations: { 
                        view.center.x -= 200.0
                        }, completion: { _ in
                                UIView.animateWithDuration(0.5, animations: {
                                view.center.y -= 100.0
                    })
            })
    })
})

Thay vào đó, chúng ta sẽ chia animation tổng thành các giai đoạn animation riêng biệt (được gọi là keyframes), sau đó chúng ta se kết hợp các keyframes này vào trong một keyframe animation.

Tạo keyframes

UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
    self.planeImage.center.x += 80.0
    self.planeImage.center.y -= 10.0
})

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

Tạo animation với key frames

UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: [], animations: {
      //add keyframes
      
      UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
        self.planeImage.center.x += 80.0
        self.planeImage.center.y -= 10.0
      })
      
      UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {
        self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))
      }
      
      UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {
        self.planeImage.center.x += 100.0
        self.planeImage.center.y -= 50.0
        self.planeImage.alpha = 0.0
      }
      
      UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {
        self.planeImage.transform = CGAffineTransformIdentity
        self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
      }
      
      UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {
        self.planeImage.alpha = 1.0
        self.planeImage.center = originalCenter
      }
      
      }, 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.

Phần tiếp trong loạt bài iOS animation sẽ là tạo animation với Auto Layout, đây là cách tạo ra các animation liên quan tới vị trí, kích thước của một UIView khi nó được ràng buộc bằng các constraint auto layout.