Lottie Files Lebih Baik dari GIF dan Image Sequence?

Kelebihan Lottie Files di banding kan GIF dan Image Sequence – Hai Sobat Tekno! Pembuatan aplikasi yang memiliki UI baik dan interaktif menjadi salah satu keunggulan sebuah aplikasi itu sendiri. Contohnya saja seperti menambahkan UI animasi pada website, entah di background, header maupun icon yang imana kita bisa merasakan keindahan dan keunikan yang memanjakan mata.

Dengan penempatan animasi yang tepat, kamu secara tidak langsung akan menghibur para user sehingga, user akan betah berlama lama untuk melihat dan mengakses aplikasi, dan mungkin ada beberapa user yang lebih menunggu animasi tersebut muncul. Apa saja Caranya?

Image Sequence

Untuk kamu yang ingin menyisipkan animasi ada berbagai cara. Cara yang pertama bisa menggunakan adalah Image Sequence. Image Sequence akan lebih berguna jika memang kamu akan menampilkan Image secara keseluruhan. Kamu akan dibawa ke dalam dunia animasi dengan Image Sequence. Sejatinya Image Sequence merupakan kumpulan gambar (JPG/PNG) yang ditampilkan sesuai dengan keinginan. Contohnya seperti penggunaan di Website Air Pods Apple . Meskipun kamu akan dimanjakan dengan tampilan nya, kamu akan menemui kekurangan dalam penggunaan Image Sequence seperti size nya yang cukup besar.

image sequence

GIF

Untuk cara yang kedua adalah menggunakan ekstensi GIF. Penyisipan animasi menggunakan ekstensi GIF ini sama dengan penyisipan di ekstensi UI statis lainnya, kamu hanya perlu memanggilnya. Akan tetapi kelemahannya adalah kurang lebih sama dengan image sequence, yakni size nya yang terkadang terlalu besar namun tidak sebesar image sequence. Apalagi jika kita menggunakan beberapa GIF dalam satu aplikasi. 

Lottie Files

Kemudian ada cara yang lebih sulit dalam pembuatannya, namun ini akan memangkas size sebuah animasi. Yakni menggunakan Lottie Files.

Apa itu Lottie Files?

gif

Lottie Files merupakan ekstensi untuk menyisipkan animasi yang berbasis JSON. Lottie Files sangat cocok digunakan untuk pembuatan animasi yang kompleks pada sebuah aplikasi dengan output size yang minim. Kamu bisa mendownload secara gratis animasi animasi unik di https://lottiefiles.com/.

lottie files

Bagaimana Cara Buat Lottie Files?

Kamu bisa membuat File ini dengan bantuan Software After Effect dan Bodymovin.

Untuk After Effect sendiri, kamu perlu untuk membuat animasi nya. Dengan penggunaan layer di After Effect, kamu bisa membuat berbagai macam animasi untuk disisipkan ke aplikasi mu.

after effect

Yang kedua adalah Bodymovin. Kamu memerlukannya untuk tools export. Setelah kita membuat animasi di After Effect, kamu perlu meng export nya menjadi file JSON.

bodymovin

Apakah kompatibel dengan berbagai Sistem Operasi?

Dengan akses yang gratis, kamu bisa menggunakan Lottie di berbagai aplikasi maupun halaman Web mu.

Kenapa Harus menggunakan Lottie

Multiplatform

Dengan Lottie Files, kamu dapat menggunakannya di IOS, Android, Web dan React tanpa perlu melakukan modifikasi. Lottie berjalan di semua browser yang sudah ada javascript modern.

Portable dan Maintainable

Animasi Lottie ini terbaca sebagai teks biasa, oleh karena itu, penggunaan nya dalam pembuatan UI untuk aplikasi mengurangi proses debugging. Lottie juga bisa di modifikasi dan di finalisasi tanpa menggunakan software khusus. Ini menjadikannya sebagai animasi dengan format grafis terpopuler yang paling portable di dunia.

Ultimate Quality

Lottie Files menampilkan grafis yang lebih baik dan lebih dinamis. Dengan berlandaskan vektor, kamu bisa menyajikan kualitas maksimal dengan ukuran yang super minim. Tentu fitur ini yang tidak ada di Image Sequence dan GIF. Sehingga kamu tidak perlu khawatir dengan size yang dihasilkan atau kualitas yang akan ke kompres.

Kesimpulannya bahwa jika kamu menginginkan UI full Animasi kamu bisa memakai Image sequence dengan resiko akan memakan size yang besar. Apabila kamu ingin menampilkan Animasi yang sederhana, kamu cukup menggunakan GIF. Tapi apabila kamu ingin menampilkan animasi yang kompleks dengan size yang super kecil bahkan lebih kecil dari GIF? Kamu perlu banget nih pakai Lottie Files

Baca juga artikel kami mengenai keunggulan React Native & Ionic.