Halo, Habr!
Pada suatu waktu, Pemilik Produk meminta kami untuk berpikir tentang membuat proses yang efektif untuk memasukkan animasi ke dalam aplikasi android / ios kami. Pada saat itu, kami melakukan tugas pra-mengisi aplikasi dengan data pribadi untuk produk pinjaman, dan butuh beberapa waktu bagi server untuk merespons, di mana kami ingin menunjukkan animasi pemuatan yang indah.
Tugasnya jelas: perancang ingin menggambar dengan indah, memberikan kode sumber untuk keduanya
platform tanpa dopilivaniya di pihaknya, dan agar tidak ketinggalan pada perangkat yang lebih lama (ya, kami masih mendukung Android 4.1).
Apa pilihan saya untuk memperkenalkan animasi:- Pena menggunakan gambar vektor yang dapat digambar. Hal yang baik adalah rendering berfungsi
di utas terpisah (dimulai dengan api 25), kontra adalah kompleksitas menciptakan animasi seperti itu dan sejumlah kecil manipulasi dengan objek. Untuk animasi sederhana, ini semua bekerja dengan baik, tetapi sedikit lebih rumit, dan neraka dimulai. Ya, dan pada platform yang berbeda Anda tidak akan memulai. - Gif - beratnya banyak, memiliki ukuran tetap, yang berarti mereka tidak skala secara normal. Dan Anda tidak akan melakukan manipulasi khusus dengan mereka.
- Urutan png (tanpa komentar).
Menggali selama beberapa waktu ke arah animasi vektor asli android dan gif (ya Tuhan, kami masih mempertimbangkan opsi ini), saya ingat perpustakaan Lottie yang indah, dan menunjukkannya kepada rekan-rekan saya.
Setelah beberapa pengujian dengan berbagai perangkat, kami memutuskan bahwa perpustakaan harus diimplementasikan, terutama karena kemampuannya sangat mengesankan. Perancang itu sangat senang, sekarang dia bisa melakukan hampir semua animasi di Adobe After Effects, dan mengekspor ke file json dengan beberapa klik. Kami senang juga, tetapi hal pertama yang pertama.
Lottie diciptakan dan diimplementasikan oleh Airbnb sebagai tanggapan terhadap permintaan yang meningkat akan animasi lintas platform, sehingga bekerja sama (baik, hampir) di semua platform. Pengembang sendiri mengklaim bahwa tujuan mereka adalah untuk mewujudkan jumlah fitur After Effects maksimum, dan mereka berhasil dalam hal ini. Sekarang menanamkan animasi Lottie semudah memasukkan gambar ke ImageView.
Kunci 3 kelas:- LottieAnimationView adalah penerus ImageView, dan cara termudah untuk menggunakan animasi. Anda dapat menggambarkan animasi dalam xml, atau Anda dapat dalam kode, sebagian besar metode didukung.
- LottieDrawable - keturunan Drawable, dengan fungsi yang sama dengan kelas sebelumnya, memungkinkan Anda untuk menerapkan animasi ke tampilan apa pun.
- LottieComposition dan pendampingnya LottieCompositionFactory memungkinkan Anda untuk memuat animasi dari berbagai sumber dan mendaftar ke LottieDrawable dan LottieAnimationView.
Memuat sumber daya
Mendukung memuat sumber daya dari:
- res / mentah
- src / aset
- String json
- Setiap url dari jaringan yang mengarah ke file json atau zip (diimplementasikan melalui HttpURLConnection, agar tidak menambahkan dependensi eksternal. Jika Anda memiliki animasi dengan gambar, maka Anda perlu menggunakan zip)
- InputStream json atau file zip
Caching animasi
Yang keren adalah bahwa semua animasi yang diunduh melalui res / raw atau aset disimpan oleh cache LRU, yang memungkinkan kita untuk tidak membuang waktu pengguna memuat ulang dan mem-parsing animasi, seperti dalam kasus animasi kompleks mungkin perlu waktu. Apa yang lebih keren, jika Anda perlu memuat animasi sebelumnya, dan kemudian dalam fragmen berikutnya menampilkan animasi secara instan, Anda dapat menggunakan kode
LottieCompositionFactory.fromRawRes(context, rawFile)
Animasi di-cache menggunakan kunci rawFile, dan di mana Anda benar-benar perlu menggunakannya, itu dimulai hampir secara instan.
Manajemen kemajuan
Lottie memungkinkan Anda untuk mengatur keadaan animasi saat ini melalui setProgress (...). Ini bisa berguna jika Anda ingin menganimasikan status unggah file, posisi gulir, berbagai gerakan, dll. Saya melihat berbagai implementasi di BottomSheets, PullToRefresh, CollapsingToolbarLayout.
Inilah cara menggunakan kemajuan dengan AppBarLayout:
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset -> val percent = Math.abs(verticalOffset).toFloat()/appBarLayout.totalScrollRange animationView.progress = percent })
Looping
Lottie mendukung perulangan setRepeatMode () atau setRepeatCount () tidak hanya seluruh animasi, tetapi juga setiap fragmen di dalam (0,0 ... 1.0). Ini diimplementasikan oleh properti setMinFrame, setMaxFrame, setMinAndMaxFrame. Kami menggunakan ini agar tidak menerapkan 3 animasi untuk status unggah file yang berbeda: idle, progres, selesai. Ini adalah sepotong kecil kode yang memecahkan ini:
when (loadingStatus) { LoadingStatus.IDLE -> { animationView.setMaxProgress(0.1f) } LoadingStatus.PROGRESS -> { animationView.setMinAndMaxProgress(0.2f, 0.9f) animationView.repeatCount = LottieDrawable.INFINITE animationView.playAnimation() } LoadingStatus.COMPLETE -> { animationView.setMinAndMaxProgress(0.9f, 1f) animationView.repeatCount = 1 animationView.playAnimation() }}
Gambar
Salah satu keuntungan utama Lottie bagi kami adalah perpustakaan mendukung penyisipan gambar langsung ke animasi. Selain itu, Anda dapat menyisipkan gambar statis dan dinamis yang diunduh dari Internet. Sekarang saya akan menjelaskan cara kerjanya.
Dalam hal gambar statis, semuanya sederhana: perancang membongkar arsip yang berisi json plus gambar itu sendiri.
{ "v": "5.1.13", "fr": 29.9700012207031, "ip": 0, "op": 47.0000019143492, "w": 1034, "h": 1334, "nm": " 1", "ddd": 0, "assets": [ { "id": "image_0", "w": 130, "h": 436, "u": "images/", "p": "img_0.png" }, { "id": "comp_0", "layers": [ ... ]}] }
Ini img_0.png, ini adalah gambar yang harus Anda masukkan ke src / aset, dan yang akan ada di dalam animasi.
Untuk memuat dinamis, metode setImageAssetDelegate digunakan, di mana Anda harus melewati bitmap. Kami memuat gambar dengan Glide, jadi pada tahap membuka sebuah fragmen dengan animasi dan gambar, semuanya keluar dari cache, jadi semuanya cukup cepat. Ini kodenya:
glideLoader.loadAsBitmap(imageUrl).into(object: CustomTarget<Bitmap>() { override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { viewAnimation.setImageAssetDelegate(object: ImageAssetDelegate { override fun fetchBitmap(asset: LottieImageAsset?): Bitmap { asset?.let { val resizeBitmap =Bitmap.createScaledBitmap(resource, it.width, it.height, true); return resizeBitmap } ?: run { return resource } } }) setAnimation(viewAnimation, animationImage) } override fun onLoadCleared(placeholder: Drawable?) {} })
Performa
Tentu saja, lebih baik tidak menggunakan banyak animasi di layar di mana pengguna menghabiskan banyak waktu, karena itu menuntut pada prosesor. Menurut pengujian kami, beban prosesor pada beberapa animasi mencapai 20%. Karena itu, kasus ideal dari animasi semacam itu adalah elemen interaktif yang menyala sekali.
Jika animasi pada beberapa perangkat melambat, terkadang ini membantu
viewAnimation.useHardwareAcceleration(true)
Namun, pengembang merekomendasikan untuk menggunakan metode ini dengan hati-hati, karena ponsel yang berbeda menggunakan akselerasi perangkat keras dengan cara yang berbeda, jadi alih-alih akselerasi, Anda bisa mendapatkan efek sebaliknya.
Kesimpulan
Secara umum, penggunaan perpustakaan Lottie sangat menyederhanakan implementasi animasi dalam aplikasi.
Keuntungan utama lottie yang kami soroti:- Ukuran perpustakaan kecil (300 kb)
- Solusi lintas platform ios / android / web
- Unduh animasi dari web
- Manajemen kemajuan dan perulangan di mana saja
- Sejumlah besar fitur dari efek setelah memungkinkan desainer untuk mewujudkan efek yang diinginkan.
Cons:- Rendering dilakukan di utas utama, dan fps dapat turun secara signifikan dalam aplikasi.
- Mengurai animasi lottie dapat memakan waktu cukup lama dengan animasi yang kompleks.
Ngomong-ngomong, untuk memeriksa seberapa intensif animasi sumber daya, Anda dapat menggunakan aplikasi
Lottie resmi
dari Google Play . Ada Grafik Render di mana Anda dapat melihat waktu untuk merender bingkai, dan juga melihat bagaimana animasi akan terlihat jika Anda memotongnya menjadi bingkai, atau bagaimana akselerasi perangkat keras dan banyak lagi akan mempengaruhi.