iOS Animation - Phần 5: Animation với Auto Layout

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 với Auto Layout. Auto Layout là kỹ thuật được Apple giới thiệu đầu tiên trong iOS 6 và nó luôn được cập nhật, cải tiến trong các bản iOS tiếp theo. Ý tưởng chính của Auto Layout là giúp lập trình viên xác lập bố cục của các thành phần trong một View dựa vào mối quan hệ và ràng buộc giữa các thành phần đó với nhau. Khi dùng Auto Layout chúng ta sẽ tạo được animation cho các thuộc tính về vị trí và kích thước của view bằng các thay đổi các ràng buộc của view đó.

Thay đổi thuộc tính constant của NSLayoutConstraint

Ví dụ: chúng ta có một NSLayoutConstraint là animationViewHeightConstraint, đây là ràng buộc chiều cao của view muốn có animation. Ban đầu chiều cao của view là 100, nên giá trị của animationViewHeightConstraint là 100 và chúng ta muốn có animation tăng chiều cao lên 200 ta sẽ phải thực hiện các bước sau:

1. Thay đổi các ràng buộc

@IBOutlet weak var animationViewHeightConstraint: NSLayoutConstraint!
animationViewHeightConstraint.constant =  200.0

1. Thực hiện animation

UIView.animateWithDuration(1.0, delay: 0.0,
    usingSpringWithDamping: 0.4, 
    initialSpringVelocity: 10.0, 
    options: .CurveEaseIn, 
    animations: {
        self.view.layoutIfNeeded() 
    },
    completion: {
    }
)

Bằng cách gọi hàm layoutIfNeeded(), chúng ta đã buộc view tính toán lại layout dựa vào các giá trị đã set ở bước 1. Và khi gọi hàm layoutIfNeeded() bên trong animation closure, chúng ta sẽ có được animation mong muốn.

Thay thế các ràng buộc

Với NSLayoutConstraint, chúng ta chỉ có thể thay đổi giá trị cho thuộc tính constant, còn các giá trị của các thuộc tính còn lại như item, attribute, relatedBy, toItem, multiplier chúng ta buộc phải thay thế bằng một ràng buộc mới bằng cách active và disable các NSLayoutConstraint.

@IBOutlet weak var constraint1st: NSLayoutConstraint!
@IBOutlet weak var constraint2nd: NSLayoutConstraint!

constraint1st.active = false
constraint2nd.active = true

Phần tiếp trong loạt bài iOS animation sẽ là Layer Animation, đây là cách tạo ra các animation bằng bằng các API của Core Animation.