Tentunya kamu sering melihat animasi yang dipasang di web atau aplikasi seperti animasi berikut.
| < |
Menarik bukan?
Sekarang membuat animasi sangat mudah. Menggnakan animasi yang baik dapat meningkatkan pengalaman positif pengguna aplikasi seluler maupun website. Ini bisa dikatakan menjadi salah satu faktor yang membedakan aplikasi yang baik dan yang biasa-biasa saja. Jika kamu ingin membuat pengguna nyaman berlama-lama melihat aplikasi atau website, kamu mungkin perlu membuat animasi yang menarik.
Namun bagaimana caranya menambahkan animasi indah yang dapat bergerak tersebut?
Kamu ga perlu khawatir karena sekarang dengan Lottie, kamu dapat dengan mudah membuat animasi tanpa perlu menulis baris kode yang jlimet. Kamu dapat mengambil animasi dari sots lootie atau membat sendiri dengan aplikasi Adobe After Effects dan menggunakannya langsung di aplikasi atau website kamu. Ini sangat keren dan menghemat banyak waktu dari penerapan animasi.
Berikut akan dipaparkan apa Itu Lottie, Bagaimana Menggunakan Lottie, Dimana Bisa Menggunakan Lottie, Apa Yang Bisa Dilakukan Lottie, Kenapa Harus Menggunakan Lottie.
Apa Itu Lottie?
Lottie adalah format file animasi berbasis JSON yang memungkinkan desainer mengirimkan animasi pada platform apa pun semudah mengirim asset statis. Lottie berisi file kecil yang berfungsi pada perangkat apa pun dan dapat meningkatkan atau menurunkan tanpa pixelation. Animasi diekspor sebagai file JSON melalui ekstensi After Effects open-source yang disebut Bodymovin. Lottie memuat data animasi dalam format JSON, dan membuat animasi secara real time.
Bagaimana Menggunakan Lottie?
Sebelum menggunakan Lottie, hal pertama yang kamu butuhkan adalah data animasi yang diekspor sebagai file JSON. Jika kamu sudah memiliki animasi After Effects, gunakan ekstensi yang disebut Bodymovin untuk membuat file JSON. Bagaimana jika kamu tidak menggunakan After Effects? Bagaimana kamu bisa menyiapkan animasi? Nah kamu dapat belajar cara menggunakan After Effects.
Namun sebenarnya banyak yang menyediakan animasi berformat lottie salah satunya yaitu LottieFiles. LottieFiles adalah situs web yang memiliki koleksi animasi berkualitas tinggi yang tersedia dalam format file Lottie. Ini juga memungkinkan desainer berbagi dan memamerkan animasi mereka. Menggunakan LottieFiles kamu dapat mengimpor dan melihat pratinjau animasi Lottie Anda dan itu akan menghasilkan baris kode yang dapat Anda gunakan untuk mengimplementasikan animasi Anda dalam proyek Anda. Semua file animasi gratis untuk diunduh di LottieFiles. Seperti Anda yang tidak memiliki pengalaman dengan After Effects, Anda pasti akan menemukan perpustakaan luar biasa.
Dimana Bisa Menggunakan Lottie?
Kamu dapat menggunakan Lotties pada dasarnya di platform apa pun seperti web atau seluler. Lottie open-source dan gratis untuk web , iOS , Android , Windows , QT , dan platform lainnya. Ini berarti kamu dapat mengintegrasikannya ke dalam aplikasi dan halaman web. Animasi Lottie bahkan dapat digunakan sebagai sticker pada platform pengiriman pesan. Secara teknis tidak terbatas pada web dan seluler. Anda dapat menggunakannya di aplikasi desktop dan juga beberapa jam tangan
Apa Yang Bisa Dilakukan Lottie?
Animasi Lottie dapat memutar animasi Anda di web atau perangkat seluler dengan tetap mempertahankan kualitas yang bagus. Itu juga dapat memiliki pengaturan cerdas yang memungkinkan animasi Anda menjadi interaktif. Website atau aplikasi Anda menjadi lebih indah sehingga pengguna betah berlama-lama melihatnya. Jika PNG adalah T-Rex, dan GIF adalah gajah, maka Lottie adalah kucing. Ukuran file Lottie secara signifikan meningkatkan kecepatan unduh dan mengurangi jumlah ruang disk yang digunakan.
Kenapa Harus Menggunakan Lottie?
Multiplatform
Lottie berjalan di multi-platform. Kamu dapat menggunakan file Lottie di iOS, Android, web, dan React Native tanpa modifikasi.
Lottie berjalan pada browser apa pun yang mendukung Javascript modern, yang berarti bahwa Lottie dapat bermain di browser modern apa pun. Ini juga merampingkan penyebaran Lotties di setiap aplikasi desktop / notebook karena sebagian besar kit pengembangan perangkat lunak modern mendukung konten web yang dinamis.
Portable dan Maintainable
Animasi Lottie disimpan sebagai teks biasa, oleh karena itu, menggunakan Lotties dalam mengembangkan antarmuka untuk aplikasi mengurangi waktu debugging dan waktu tunggu keseluruhan. File Lottie teks biasa juga lebih mudah dirawat dan disempurnakan tanpa menggunakan perangkat lunak khusus.
Data teks animasi Lottie diformat sebagai JSON, yang berarti siap untuk asimilasi ke dalam Javascript, atau lingkungan pengembangan aplikasi apa pun yang mendukung JSON, tanpa penguraian tambahan. Ini menjadikan Lottie format grafik animasi populer yang paling portabel di dunia.
Dynamic
Karena data Lottie diformat-JSON, isinya dapat dengan mudah dimanipulasi atau diganti pada berbagai tingkat granularitas.
Selain itu, konten pengganti dapat dimuat secara dinamis dari lokasi mana pun. Ini menjadikan Lottie format grafis animasi populer paling dinamis di dunia saat ini.
Ultimate Quality
Animasi Lottie digambar menggunakan vektor yang menentukan dimensi bentuk geometris, bersama dengan berbagai kualifikasi yang menentukan karakteristik bentuk-bentuk ini dan bagaimana mereka bergerak/berubah selama animasi.
Ukuran file-nya super kecil namun kualitas nya sangat baik. Pembuat Lottie melakukan rendering ini pada resolusi asli layar yang sedang diputar. Ini berarti bahwa animasi Lottie selalu disajikan dengan kualitas terbaik pada perangkat pengguna. Jika pengguna memperbesar ke animasi Lottie, maka pembuat menggambar ulang konten yang diperbesar pada resolusi asli. Dengan demikian, animasi Lottie tidak pernah bisa pixelate, garis dalam animasi Lottie akan tetap tidak berubah tidak peduli kedalaman perbesaran.
Baca juga Tingkatan generasi
Intuitive Content Workflow
Lotties saat ini dibuat dengan mengekspor animasi yang diproduksi di Adobe After Effects ke dalam file Lottie. Ini berarti bahwa pengguna Adobe After Effects yang ada dapat segera mulai membuat konten Lottie dengan menggunakan Plugin LottieFiles.
Setelah membuat Lottie, Anda dapat mengunggahnya ke Editor Lottie untuk menguji dan mengubahnya. Alat ini juga dapat mengekspor animasi ke beberapa varian eksotis Lottie, meskipun pada intinya, format konten Lottie tidak berubah.
Setelah Anda puas dengan konten lottie Anda, Anda dapat mulai memasukkannya ke dalam aplikasi atau website Anda.
Contoh Animasi Lottie
| < |
Kesimpulan
Menggunakan Lotties di aplikasi Anda akan menghasilkan antarmuka pengguna yang cepat, dinamis dan indah. Persyaratan penyimpanan untuk komponen yang di hosting dari aplikasi Anda akan sangat berkurang dan konsumsi bandwidth lebih sedikit. Namun untuk bandwidth jangan khawatir, hosting murah Masterweb memberikan unlimited bandwidth, sehingga bandwidth bukan lagi menjadi masalah.
Sumber : dari berbagai sumber
Video Cara Mudah memasang animasi Lottie di web