Enam bulan lalu, kami memperkenalkan salah satu fitur Badoo yang paling mengesankan -
live streaming . Di antara hal-hal lain, ini memungkinkan pengguna untuk menyatakan terima kasih kepada pita favorit mereka dalam bentuk hadiah. Kami ingin membuat hadiah ini secerah dan semenarik mungkin, jadi kami memutuskan untuk menghidupkannya kembali - dengan kata lain, menghidupkan. Dan untuk membuatnya lebih menarik, kami berencana untuk memperbarui hadiah dan animasi setiap beberapa minggu.
Insinyur iOS mungkin telah menebak berapa banyak pekerjaan yang sedang dibahas: untuk menghapus yang lama dan menambahkan animasi baru, Anda perlu melakukan banyak tindakan di sisi klien. Untuk melakukan ini, tim Android dan iOS harus terlibat dalam setiap rilis, dan, bersama dengan waktu yang diperlukan untuk menyetujui pembaruan di App Store, ini berarti bahwa peluncuran setiap rilis dengan animasi yang diperbarui dapat memakan waktu beberapa hari. Namun, kami berhasil menyelesaikan masalah ini, dan sekarang saya akan memberi tahu Anda caranya.
Arsitektur Solusi
Pada saat itu, kami sudah tahu cara
mengekspor animasi Adobe After Effects (selanjutnya - AAE) dalam format yang dapat dimengerti oleh aplikasi iOS kami menggunakan perpustakaan Lottie. Kali ini kami melangkah lebih jauh: kami memutuskan untuk menyimpan semua animasi yang relevan di server dan mengunduhnya sesuai kebutuhan.
Contoh animasi nyata dalam aplikasi kita, diperoleh dengan cara ini:
Namun, dalam posting ini sebagai contoh saya akan mengambil animasi sederhana yang saya buat sendiri. Ini tidak sekreatif di Badoo, tetapi cukup cocok untuk menunjukkan pendekatan kami.
Animasi ekspor
Proyek AAE yang saya gunakan dapat ditemukan bersama dengan
sumber lain di GitHub . Jadi, membuka proyek yang berlokasi di
_raw/animations/Fancy/Fancy.aep , Anda akan melihat jendela:
Sekarang saya tidak berbicara tentang proses membuat animasi di AAE, tetapi tentang cara mengimpor animasi yang ada dari AAE ke dalam format yang cocok untuk aplikasi iOS menggunakan plugin
Bodymovin .
Setelah menginstal plugin, buka dengan memilih
Window / Extensions / Bodymovin dari menu :
Jendela Bodymovin akan muncul, di mana Anda dapat memilih animasi untuk diekspor, folder untuk menyimpan file yang dihasilkan dan membuka pengaturan ekspor:
Dalam pengaturan animasi, kami dapat meminta Bodymovin untuk memasukkan sumber daya dalam file JSON dengan memilih
Aset / Sertakan di json :
Akhirnya, dengan menekan tombol
Render , kami mengekspor dan menyimpan komposisi animasi yang dipilih ke file.
Menyimpan animasi di server
Misalkan kita mengunggah file JSON beranimasi yang diberikan ke server web. Dalam kasus kami, untuk kesederhanaan, saya menempatkan mereka di repositori proyek di GitHub. Animasi tersedia di sini:
Tautan dasar
https://raw.githubusercontent.com/chupakabr/server-provided-animations/master/_raw/rendered-animations/ID Animasi:
clouds.json
fireworks.json
Catatan: Mencari server web Swift untuk animasi? Solusinya tersedia di sini , dan penjelasan rinci ada di artikel ini .
Jadi, kami memiliki server yang berfungsi dengan animasi, jadi inilah saatnya untuk beralih ke bagian yang paling menarik: membuat animasi di layar.
Tampilan Animasi
Sekarang saya menyarankan Anda untuk membuka proyek
demo untuk
aplikasi iOS kami , karena berisi semua kode dan pengaturan yang diperlukan.
Unduh animasi
Mengingat bahwa REST API untuk menerima data sudah siap, sekarang saatnya untuk memperkenalkan protokol penyedia data dan menambahkan implementasinya, yang mengunduh data dari server:
import Lottie protocol AnimationsProviderProtocol { typealias Completion = (_ animation: LOTComposition?) -> Void func loadAnimation(byId id: String, completion: @escaping Completion) } final class ServerAnimationProvider: AnimationsProviderProtocol { private let endpoint: URL init(endpoint: URL) { self.endpoint = endpoint } func loadAnimation(byId id: String, completion: @escaping Completion) { let path = "/\(id).json" guard let animationUrl = URL(string: path, relativeTo: self.endpoint) else { completion(nil) return } URLSession.shared.invalidateAndCancel() let task = URLSession.shared.dataTask(with: animationUrl) { (data, response, error) in guard error == nil, let data = data, let json = self.parseJson(from: data) else { completion(nil) return } let animation = LOTComposition(json: json) completion(animation) } task.resume() } private func parseJson(from data: Data?) -> [AnyHashable : Any]? { guard let data = data else { return nil } do { let json = try JSONSerialization.jsonObject(with: data, options: []) as? [AnyHashable : Any] return json } catch { return nil } } }
Kelas penyedia data ini memungkinkan kita untuk mengunduh animasi dalam format JSON dari server berdasarkan permintaan dan menyimpannya dalam memori untuk dirender ke UI. Misalkan kita mengikuti pola MVVM - maka mudah untuk menggunakannya dalam entitas
ViewModel sebagai berikut:
// ... private let animationProvider: AnimationsProviderProtocol private(set) var animationModel: LOTComposition? // … func loadAnimation(byId animationId: String) { self.animationProvider.loadAnimation(byId: animationId) { [weak self] (animationModel) in self?.animationModel = animationModel } } // ...
ViewModel memperbarui properti animasi yang dipilih ketika menerima respons HTTP yang benar dari server dengan objek JSON yang tidak kosong. Data ini digunakan oleh lapisan presentasi untuk menampilkan animasi.
Lapisan presentasi
Sekarang kita bisa menggunakan
ViewModel untuk mengakses data animasi dan menampilkannya di UI menggunakan pengendali tindakan sentuh yang terpasang pada tombol:
class ViewController: UIViewController { // ... @IBOutlet weak var animationContainer: UIView! override func viewDidLoad() { super.viewDidLoad() // ... self.animationView = { let view = LOTAnimationView(frame: self.animationContainer.bounds) self.animationContainer.addSubview(view) return view }() } @IBAction func onPlayAnimationAction(_ sender: Any) { self.animationView.stop() self.animationView.sceneModel = self.viewModel.animationModel self.animationView.play() } }
Ketika sebuah tombol diklik, instance LOTAnimationView diperbarui dengan data terbaru dari
ViewModel .
Begini tampilannya:
Itu saja. Sekarang aplikasi menampilkan animasi yang diunduh dari REST API kami
(dari server).
Kiat & Keterbatasan
Trik:
- AAE mendukung sebagian besar jenis objek, termasuk raster dan gambar vektor;
- Bodymovin memungkinkan Anda untuk menanamkan semua sumber daya dalam file JSON akhir menggunakan Base64, dan ini memungkinkan Anda untuk menghindari memuat sumber daya secara terpisah di sisi klien;
- Anda dapat menggambar langsung dalam vektor di AAE atau hanya mengimpor gambar vektor dalam format Adobe Illustrator.
Sayangnya, saya tidak dapat mengimpor file SVG ke AAE (saya sudah mencoba!).
Anda dapat mempelajari lebih lanjut tentang trik dan memecahkan masalah yang mungkin dari
artikel yang menarik ini oleh rekan saya
Radoslaw Sesiva .
Kesimpulan
Jadi, apa yang diberikan animasi unduhan dari server? Manfaat paling nyata dari pendekatan ini adalah kemampuan untuk berbagi semua peserta dalam proses pembaruan animasi. Dengan kata lain, untuk merilis animasi keren yang baru, desainer hanya perlu menyediakan file server JSON yang sesuai kepada tim. Untuk menghapus animasi pada klien, cukup hapus dari server. Mudah dan cepat.
Sangat keren juga bahwa fungsi yang sama dapat diimplementasikan pada semua platform yang didukung (iOS, Android, Web), tanpa membuat perubahan pada protokol client-server, kode server, dan file animasi sendiri langsung pada klien.
Itu saja. Terima kasih atas perhatian anda!
Tautan yang bermanfaat