Apa itu animasi Lottie? Semua yang perlu Anda ketahui tentang Lottie

Membuat animasi kompleks untuk Android, iOS, dll., tentu saja, merupakan proses yang panjang. Bahkan sebagai desainer atau animator, terkadang proses asah otak.

Anda harus mengunggah file gambar besar untuk setiap ukuran layar atau menulis ribuan baris kode yang rapuh dan sulit dipelihara. Akibatnya, meskipun merupakan alat yang ampuh untuk mengomunikasikan ide dan menghasilkan pengalaman pengguna yang menarik, sebagian besar aplikasi tidak menggunakan animasi video.

Tidak perlu seperti itu! Masalah ini sudah lama berlalu, dan ada banyak format file, platform, dll., yang dapat Anda manfaatkan untuk menyederhanakan alur kerja Anda. Salah satu format tersebut adalah Lottie.

Di blog ini, saya akan memberi tahu Anda tentang format yang menarik dan praktis ini.

Apa itu Lotti?

Pada tahun-tahun sebelum Lottie, perancang gerak akan membuat animasi mereka dan kemudian mengirimkannya ke pengembang perangkat lunak untuk diterapkan. Opsi implementasi tidak memadai dan cakupannya terbatas.

Itu adalah praktik umum bagi pengembang untuk mengekspor animasi dalam format berkualitas rendah atau mencoba membuat ulang desain animasi dalam kode dari awal hingga kemampuan terbaik mereka. Tidak mengherankan, itu bukan teknik yang paling efisien dan sering kali menghasilkan animasi yang tidak efisien dan terlihat sangat berbeda dari keluaran yang dimaksudkan oleh perancang gerak.

Hernan Torrisi muncul dengan gagasan mengekspor representasi animasi yang dibuat di Adobe After Effects dan menghasilkan animasi saat runtime pada tahun 2015. Kemampuan skrip After Effects digunakan untuk mengulangi proyek animasi, dan plugin untuk Adobe After Effects yang disebut Bodymovin dikembangkan yang menghasilkan deskripsi animasi dalam format JSON.

Bersama pemain untuk browser, ia menyediakan renderer pertama untuk format tersebut, yang dibuat menggunakan Javascript.

Sejak diperkenalkan pada tahun 2017, LottieFiles telah menyediakan platform bagi animator dan pengembang untuk menguji, berbagi, dan memamerkan animasi mereka dengan cepat di web. Format File Berbasis Animasi Lottie (JSON) memungkinkan desainer untuk mentransfer animasi di seluruh platform dengan mudah.

Nama Lottie diambil dari Charlotte 'Lotte' Reiniger, seorang sutradara film Jerman yang secara luas dianggap sebagai pelopor animasi siluet terkemuka di dunia. Tidak ada batasan pada platform yang didukungnya. Ini dapat diakses melalui iOS, Android, dan web.

Kombinasi komponen vektor dan raster digunakan di Lottie untuk membuat animasi berkualitas tinggi yang bersifat lintas platform. Bertujuan untuk elemen dan parameter animasi tertentu, ia menawarkan kemampuan untuk menambahkan interaktivitas dan mengubah parameter selama runtime.

Ini adalah file kecil yang dapat digunakan di perangkat apa pun dan dapat diskalakan tanpa kehilangan kualitas. File lottie dapat digunakan kembali oleh pengembang dalam pemrograman mereka.

Apa yang bisa dilakukan Lottie?

Lottie memungkinkan animasi Anda diputar di web atau perangkat seluler apa pun dalam kualitas tinggi, dan dengan pengaturan cerdas, Anda membuat animasi Anda lebih menarik.

Satu hal yang perlu diingat adalah bahwa saat membangun untuk Lottie, file JSON harus lebih kecil mungkin untuk platform seluler. Gunakan teknik pengasuhan bila memungkinkan.

Kode ekstra ditambahkan saat menduplikasi keyframe yang sama pada lapisan yang sama. Anda harus menggunakan animasi keyframe jalur bila memungkinkan.

Sebagian besar ruang dimakan dengan menambahkan data untuk setiap simpul pada setiap bingkai utama.

Jejak otomatis atau teknik goyangan memberi Anda bingkai utama untuk setiap bingkai tetapi membuat ukuran file JSON Anda sangat berat dapat berdampak negatif pada kinerja. Mereka harus seimbang dengan komposisi untuk bekerja dengan lancar dan efisien.

Di mana Anda dapat menggunakan Lottie?

Lottie's dapat diakses dari hampir semua platform, termasuk web dan perangkat seluler, menurut pengembangnya. Dengan kata lain, mereka dapat dengan mudah diintegrasikan ke dalam aplikasi seluler dan aplikasi berbasis web.

Pada beberapa layanan perpesanan, animasi Lottie bahkan dapat digunakan sebagai stiker. Itu tidak terbatas pada web atau perangkat seluler dalam hal batasan teknis. Pada aplikasi desktop serta beberapa jam tangan pintar, Anda dapat memanfaatkannya.

Berbagai Plugin dan pustaka lintas platform tersedia untuk Web, iOS, Android, Flutter, React, Vue, Angular, dan Sketch. Figma, After Effects, dan lainnya didukung dalam file animasi Lottie.

Mengapa menggunakan animasi Lottie?

Wajar untuk berpikir mengapa Anda harus menggunakan animasi Lottie ketika ada begitu banyak pilihan lain yang tersedia.

Inilah alasannya:

Bisa dimainkan dimana saja

Pemutar web Lottie kompatibel dengan browser apa pun yang mendukung Javascript kontemporer, yang berarti bahwa Lottie dapat dimainkan di browser modern apa pun yang mendukung Javascript. Selain itu, karena kit pengembangan perangkat lunak terbaru menawarkan konten web dinamis, integrasi Lottie ke dalam program desktop atau laptop menjadi lebih sederhana.

Ada juga perpustakaan yang tersedia untuk mengimplementasikan pemutaran Lottie ke dalam platform iOS, Android, dan Tizen, sehingga memungkinkan untuk menggunakan Lottie dalam aplikasi seluler di sebagian besar smartphone dan tablet. Animasi Lottie dengan cepat diadopsi oleh perusahaan besar untuk meningkatkan tampilan depan seluler mereka, sementara perusahaan rintisan menggunakan Lottie dalam desain produk mereka untuk memisahkan diri dari kompetisi.

Mudah dirawat

Animasi lottie disimpan sebagai teks biasa, yang berarti dapat dilihat oleh manusia. Akibatnya, mempekerjakan Lottie dalam pengembangan antarmuka aplikasi mengurangi waktu debugging serta total waktu untuk penyebaran. Selain itu, file Lottie teks biasa tidak terlalu rumit untuk dirawat dan disempurnakan karena tidak memerlukan penggunaan perangkat lunak khusus.

Data teks dalam animasi Lottie disusun sebagai JSON, yang berarti siap untuk diasimilasi ke dalam Javascript atau lingkungan pengembangan aplikasi lainnya yang menerima JSON tanpa perlu penguraian atau pemrosesan tambahan. Hasilnya, Lottie telah menjadi format grafis animasi portabel yang paling banyak digunakan dan portabel di dunia.

Itu dinamis

Struktur JSON dari data Lottie memungkinkan manipulasi dan penggantian kontennya dengan mudah pada berbagai tingkat perincian, mulai dari nilai pecahan hingga sebagian besar objek. Bahan pengganti, di samping itu, mungkin dimuat secara dinamis dari situs mana pun. Akibatnya, Lottie saat ini adalah format grafik animasi yang paling dinamis dan paling banyak digunakan.

Skalabilitas

Karena visual konvensional berukuran besar, banyak bisnis menggunakannya dengan hemat dalam antarmuka pengguna aplikasi. Terlalu banyak grafik dapat meningkatkan biaya penyimpanan dan pengambilan, terutama saat mencari dan menyortir data secara kontekstual.

Saat digunakan dalam solusi besar, file Lottie dapat meminimalkan biaya penyimpanan dan penyortiran/pencarian kontekstual. Karena Lotties bersifat dinamis, aplikasi hanya perlu memuat komponen yang perlu diperbarui pada saat tertentu.

Kualitas Terbaik

Ini menggunakan vektor untuk mewakili dimensi bentuk geometris, serta kualifikasi untuk menentukan karakteristik mereka dan bagaimana mereka terus bergerak selama animasi. Pemain Lottie merender pada resolusi asli layar. Ini memastikan bahwa animasi Lottie selalu ditampilkan dalam kualitas terbaik.

Seorang pengguna memperbesar animasi Lottie, dan pemain menggambar ulang pada resolusi asli. Ini berarti animasi Lottie tidak pernah pixelate, tidak peduli seberapa diperbesarnya.

dalam sebuah inti

Antarmuka pengguna yang cepat, dinamis, dan elegan dapat dicapai dengan menggunakan Lotties. Konsumsi bandwidth pelanggan Anda akan jauh berkurang sebagai akibat dari kebutuhan penyimpanan yang lebih rendah untuk komponen aplikasi yang dihosting.

Jika Anda ingin membuat video animasi Lottie, tempat terbaik yang Anda inginkan adalah webdew.

Di webdew, video explainer, animasi karakter, animasi 2D, dan animasi papan tulis dibuat secara ekstensif oleh animator terampil dan desainer grafis gerak. Hubungi kami untuk mengetahui lebih banyak.

Editor: Amrutha