Bài viết này tập trung vào việc sử dụng Ảnh động CA trong iOS để tạo ảnh động mượt mà.
Trong những ngày đầu tiên làm việc với iOS, tôi sẽ rất lo lắng bất cứ khi nào một nhà thiết kế đến gặp tôi và yêu cầu một số hoạt ảnh trong ứng dụng mà họ đang làm việc.
Tôi từng nghĩ rằng việc đưa ra thiết kế cho hình ảnh động là dễ dàng - nhưng mặt khác, việc thực hiện nó là một nhiệm vụ rất khó khăn.
Tôi sẽ nhận được trợ giúp từ Google, StackOverflow và các đồng nghiệp của tôi để triển khai.
Trong quá trình này, tôi phát triển chứng sợ ảnh động và luôn cố gắng tránh chúng. Nhưng tất cả đã thay đổi vào một ngày nào đó.
Tìm CAAnimation
Một lần, tôi phải tạo hiệu ứng cho một chuỗi hình ảnh trong một chế độ xem. Vậy bước đầu tiên của tôi là gì? Rõ ràng là StackOverflow!
Liên kết đầu tiên có mã.
let image_1 = UIImage(named: "image-1")!
let image_2 = UIImage(named: "image-2")!
let image_3 = UIImage(named: "image-3")!
let images = [image_1, image_2, image_3]
let animatedImage = UIImage.animatedImage(with: images, duration: 2.0)
imageView.image = animatedImage
Có vẻ khá đơn giản phải không? Nếu nó đơn giản như vậy, tôi sẽ không viết bài này.
Đây là hoạt ảnh bắt buộc phải có:
Và có lẽ đã trở nên rõ ràng, tôi đã không ở gần nó. Tôi đã bị mắc kẹt. Làm thế nào tôi có thể thực hiện nhiều tùy chỉnh trong hoạt ảnh đó và đồng bộ hóa tất cả chúng?
Sau đó, đồng nghiệp của tôi bảo tôi hãy thử CAAnimation. Tôi đã đọc về nó và thử nó trong một dự án mẫu. Trước sự ngạc nhiên của tôi, nó thực sự mạnh mẽ và dễ sử dụng.
Core Animation là gì?
Core Animation giúp bạn thực thi nhiều hoạt ảnh mà hầu như không sử dụng CPU.
Nó cung cấp cho bạn tốc độ khung hình cao và nhiều tùy chỉnh mà bạn có thể sử dụng với rất ít mã.
Bạn có thể tìm thêm thông tin chi tiết trong tài liệu tại đây:https://developer.apple.com/documentation/quartzcore
Tôi đã có thể thực hiện triển khai cơ bản sau vài giờ:
func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) {
let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition)
firstImageView.layer.add(basicAnimation1, forKey: "position")
let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition)
secondImageView.layer.add(basicAnimation2, forKey: "position")
self.addNextImage(forImageView: firstImageView)
}
func getBasicAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CABasicAnimation {
let basicAnimation = CABasicAnimation(keyPath: "position")
basicAnimation.fromValue = NSValue(cgPoint: initialPos)
basicAnimation.toValue = NSValue(cgPoint: finalPos)
basicAnimation.duration = 1
basicAnimation.isRemovedOnCompletion = false
basicAnimation.fillMode = CAMediaTimingFillMode.forwards
basicAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
return basicAnimation
}
Để triển khai này, tôi đã sử dụng CABasicAnimation .
CABasicAnimation lớp giúp bạn tạo hiệu ứng cho một thuộc tính lớp (có thể là màu nền, độ mờ, vị trí, tỷ lệ) giữa hai giá trị. Bạn chỉ cần đưa ra giá trị bắt đầu và giá trị kết thúc, phần còn lại sẽ được xử lý. Hoạt ảnh bắt đầu ngay lập tức trong vòng chạy tiếp theo như được mô tả đầy đủ hơn ở đây.
Bây giờ, quay lại vấn đề của chúng ta.
Để thực hiện điều này, tôi đã chụp hai chế độ xem hình ảnh và thêm hai hình ảnh riêng biệt vào chúng. Sau đó, tôi tiếp tục tạo hoạt ảnh cho chúng lần lượt bằng CAAnimation.
Bạn có thể tìm thấy mã nguồn tại đây.
Nếu bạn kiểm tra gif cuối cùng, bạn sẽ thấy rằng có gì đó không ổn. Trước khi hình ảnh đầu tiên của hộp quà bị khuất khỏi tầm nhìn, tai nghe sẽ nhấp nháy một thời gian ngắn và sau đó hình ảnh di chuyển lên trên.
Tại sao điều này lại xảy ra?
Đó là bởi vì ngay sau khi chúng tôi thêm hoạt ảnh vào chế độ xem hình ảnh, chúng tôi sẽ thêm hình ảnh tiếp theo vào chế độ xem đó (dòng số 5 và 6):
private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) {
let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition)
firstImageView.layer.add(basicAnimation1, forKey: "position")
let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition)
secondImageView.layer.add(basicAnimation2, forKey: "position")
self.addNextImage(forImageView: firstImageView)
}Ở đây chúng tôi đang đấu tranh với vấn đề làm thế nào để đồng bộ hóa cả hai hình ảnh trong hoạt ảnh. Nhưng luôn có một giải pháp với CAAnimation.
Giao dịch CA
Giao dịch CA giúp chúng tôi đồng bộ nhiều hoạt ảnh với nhau. Nó đảm bảo rằng tất cả các hoạt ảnh mà chúng tôi đã được nhóm lại với nhau đều bắt đầu cùng một lúc.
Ngoài ra, bạn có thể cung cấp một khối hoàn thành cho các hoạt ảnh của mình, khối này sẽ được thực thi khi tất cả các hoạt ảnh của bạn trong một gói được hoàn thành.
Bạn có thể đọc thêm về nó tại đây.
private func addAnimation(firstImageView: UIImageView, secondImageView: UIImageView) {
CATransaction.begin()
CATransaction.setCompletionBlock {
self.addNextImage(forImageView: firstImageView)
}
let basicAnimation1 = getBasicAnimation(withInitialPostion: centerPosition, finalPos: finalPosition)
firstImageView.layer.add(basicAnimation1, forKey: "position")
CATransaction.commit()
let basicAnimation2 = self.getBasicAnimation(withInitialPostion: self.initalPosition, finalPos: self.centerPosition)
secondImageView.layer.add(basicAnimation2, forKey: "position")
}
Bạn bắt đầu bằng cách viết CATransaction.begin() . Sau đó, viết tất cả các hoạt ảnh mà bạn muốn thực hiện đồng bộ. Cuối cùng, hãy gọi CATransaction.commit() sẽ bắt đầu hoạt ảnh trong khối.
Hãy xem hoạt ảnh của chúng ta trông như thế nào bây giờ:
Một điều cuối cùng tôi cần làm là thêm hiệu ứng Mùa xuân vào hoạt ảnh. Rất may, CAAnimation cũng có giải pháp cho việc này.
CA Spring Animation
CA Spring Animation, khi được thêm vào một lớp, tạo hiệu ứng giống như lò xo cho nó, để nó dường như được kéo về phía mục tiêu bởi một lò xo.
Lớp càng xa mục tiêu, gia tốc đối với nó càng lớn.
Nó cho phép kiểm soát các thuộc tính dựa trên vật lý như giảm xóc và độ cứng của lò xo. - Docs
Bạn có thể đọc thêm về nó từ tài liệu của Apple:https://developer.apple.com/documentation/quartzcore/caspringanimation
Hãy triển khai nó cho mã hiện có của chúng tôi:
private func getSpringAnimation(withInitialPostion initialPos: CGPoint, finalPos: CGPoint) -> CASpringAnimation {
let basicAnimation = CASpringAnimation(keyPath: "position")
basicAnimation.fromValue = NSValue(cgPoint: initialPos)
basicAnimation.toValue = NSValue(cgPoint: finalPos)
basicAnimation.duration = basicAnimation.settlingDuration
basicAnimation.damping = 14
basicAnimation.initialVelocity = 5
basicAnimation.isRemovedOnCompletion = false
basicAnimation.fillMode = CAMediaTimingFillMode.forwards
return basicAnimation
}
Công việc của tôi đã xong ở đây.
Tóm lại, đây là một số ưu điểm của việc sử dụng Ảnh động CA:
- Chúng dễ sử dụng và triển khai
- Có rất nhiều tùy chỉnh có sẵn
- Có thể đồng bộ hóa nhiều hoạt ảnh
- Mức sử dụng CPU gần như không có
Đây chỉ là một vài trong số những ưu điểm. Khả năng là vô tận.
Bây giờ, bất cứ khi nào có yêu cầu về hoạt hình, tôi cảm thấy tự tin khi thiết kế và thực hiện chúng. Và tôi hy vọng bạn cũng cảm thấy như vậy sau khi đọc nó.
Vui lòng để lại bất kỳ đề xuất hoặc phản hồi nào.