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

Ở part cuối của Animation Basic này, mình xin giới thiệu đến mọi người phần ảo diệu nhất của animation với UIView đó là UIView.transition. Transitions được dùng khi chúng ta muốn tạo hiệu ứng cho việc hidden view hay add hoặc remove một view lên hoặc khỏi một view cha của nó hay thay thế 2 views cho nhau khá tương đồng với các slide chúng ta hay gặp trong power point.

UIView Transitions và các hiệu ứng của View

UIView.transition(with: self.view, duration: 2.0, options:[.transitionCrossDissolve, .repeat], animations: {
        self.view.addSubview(self.animatedView)
}, completion: nil)

Tương tự keyframe và animation, transition cũng gồm các thuộc tính cơ bản:

• withView: view thực hiện animation
• duration: thời gian thực hiện animation
• options: nơi thêm các hiệu ứng thay đổi view
• animations: closure chỉ ra animation đối tượng gì
• completion: khi animation kết thúc, closure này sẽ được thực thi

Các tùy chọn hiệu ứng options cho Transition

• transitionFlipFromLeft/ transitionFlipFromRight

UIView.transition(with: self.animationView, duration: 1, options: [.transitionFlipFromLeft, .repeat], animations: {
            self.animationImage.alpha = 1
        }, completion: { _ in
            self.animationImage.removeFromSuperview()
        })

• transitionCurlUp/ transitionCurlDown

UIView.transition(with: self.animationView, duration: 1, options: [.transitionCurlUp], animations: {
            self.animationImage.alpha = 0
            self.animationImage2.alpha = 1
        }, completion: { _ in
            self.animationImage.removeFromSuperview()
        })

• transitionCrossDissolve

UIView.transition(with: self.animationView, duration: 4, options: [.transitionCrossDissolve], animations: {
            self.animationImage.alpha = 1
        }, completion: { _ in
        })

• transitionFlipFromTop/transitionFlipFromBottom

UIView.transition(with: self.animationView, duration: 2, options: [.transitionFlipFromBottom], animations: {
            self.animationImage.alpha = 1
            self.animationImage2.removeFromSuperview()

        }, completion: { _ in
        })

Transition rất đơn giản và cực kỳ hiệu quả, nó giúp app của chúng ta trở lên thân thiện, gần gũi hơn đối với người dùng. Tuy nhiên, nếu trong một màn hình có quá nhiều chuyển động sẽ dễ gấy rối mắt vì vậy hãy sử dụng các hiệu ứng animation một cách hiệu quả để đạt được kết quả tối ưu nhất.

Cảm ơn mọi người đã theo dõi loạt bài về Basic Animation của mình!
Hi vọng sẽ được mọi người ủng hộ ở những bài tiếp theo.