Xin chào mọi người,
Hôm nay, mình sẽ chia sẻ đôi chút kiến thức của mình về tạo animation giúp app của chúng ta trở lên thú vị và thu hút hơn đối với người dùng.
Những điều cơ bản để tạo được animation
Về cơ bản, animation là tổ hợp các thay đổi về frame, bounds, center, transform, alpla, backgroundColor của đối tượng trên mặt phẳng và không gian chứa đối tượng ấy. Tất cả những animaton phức tạp đều được tạo thành từ những phần tử cơ bản nói trên vì vậy khi gặp 1 yêu cầu về animation phức tạp, bạn đừng vội lo lắng, thay vào đó, hãy phân tích animation ấy và đưa về các khái niệm cơ bản nhất và thực hiện từng bước các thay đổi điều kì diệu sẽ xuất hiện và bạn sẽ rất thích thú với những gì mình làm được. 🙂
UIView.animation thường được sử dụng với những animation đơn giản:
UIView.animate(withDuration: 0, animations: {})Thay đổi màu sắc và hình dạng của View
self.animationView.backgroundColor = UIColor.purple
self.animationView.alpha = 1
self.animationView.layer.cornerRadius = 50
Làm thế nào để thay đổi được kích thước và vị trí?
Hãy cùng tìm hiểu 3 câu lệnh sau đây để thực hiện được điều trên,
imageView.transform = CGAffineTransform(scaleX: 2, y: 2)
imageView.transform = CGAffineTransform(translationX: 0, y: 100)
imageView.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
Ngoài ra, chúng ta còn có một số cách sau để thay đổi kích thước và vị trí của đối tượng,.
imageView.frame.origin.x += 100 imageView.frame.origin.y += 100 imageView.center.x = 100 imageView.frame.origin = CGPoint(x: 100, y: 100)
Hãy cùng nhau thử trộn các thay đổi trên vào xem kết quả chúng ta sẽ được gì nhé!
UIView.animate(withDuration: 2, animations: {
self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
})
UIView.animate(withDuration: 2, animations: {
self.imageView.transform = CGAffineTransform(translationX: 0, y: -200)
let scaleImage = CGAffineTransform(scaleX: 4, y: 4)
let rotateImage = CGAffineTransform(rotationAngle: CGFloat.pi * 2)
self.imageView.transform = scaleImage.concatenating(rotateImage)
self.imageView.alpha = 1
})
Chúng ta đã cùng nhau hoàn thành 1 trong những animation cơ bản nhất của một app.
Hi vọng những kiến thức mình chia sẻ có ích với tất cả mọi người!