Bermula dengan Lottie.js

dekad transformasi animasi web: dari kejatuhan kilat hingga kebangkitan lottie

kira -kira sepuluh tahun yang lalu, animasi web menghadapi cabaran besar. Adobe Flash secara beransur -ansur merosot, tetapi tidak mempunyai alternatif yang sesuai. Kami memerlukan format yang cepat, mudah untuk dibuat, mesra web yang boleh membuat persembahan animasi berskala besar, kartun dan iklan spanduk.

Nasib baik, pada tahun 2014, Airbnb memberikan kami penyelesaian - lottie.js.

Mata Utama:

1. lottie.js muncul sebagai alternatif flash: kira -kira sedekad yang lalu, disebabkan oleh penurunan adobe flash, bidang animasi web berada di tengah -tengah perubahan, dan terdapat kekurangan yang jelas Alternatif untuk membuat animasi mesra web. Pada tahun 2014, Airbnb memperkenalkan Lottie.js, format animasi berasaskan vektor yang direka untuk membuat animasi jalur lebar yang cepat dan rendah yang berjalan lancar pada pelbagai platform termasuk Web, iOS, Android, Windows, dan React Native. Dibangunkan oleh Salih Abdul-Karim dari Airbnb, Lottie direka untuk menyediakan penyelesaian berskala dan cekap untuk animasi grafik vektor sebagai alternatif kepada animasi GIF, MPEG atau CSS.
2. Kelebihan dan ekosistem lottie.js: Di antara pelbagai pilihan animasi web, lottie.js mempunyai ekosistem yang semakin meningkat alat animasi visual yang berkualiti tinggi dan kemampuan yang lancar, cepat dan scriptable untuk animasi menonjol. Dengan memanfaatkan fail JSON untuk arahan animasi, Lottie menyediakan aliran kerja yang mudah yang mewujudkan animasi berkualiti tinggi dan cekap, mengingatkan gabungan manfaat kreatif dan penempatan Adobe Flash.
Alat dan kes penggunaan praktikal untuk membuat animasi lottie:
3. animasi lottie boleh dibuat melalui pelbagai alat animasi "lottie-enabled", dengan mengambil kira kualiti alat animasi dan kesukaran untuk menggunakan kod lottie . Dari Adobe selepas kesan ke Keyshape dan Lottiefiles, setiap alat menawarkan ciri -ciri unik, harga dan sokongan platform untuk memenuhi keperluan dan kepakaran animasi yang berbeza. Dengan harga satu kali, Keyshape mewakili penyelesaian kos efektif untuk pengguna yang tidak sering animasi, dan aliran menyediakan pakej komprehensif untuk kerja yang sering animasi. Lottiefiles terus memperkayakan ekosistem dengan menyediakan komuniti, pasaran, dan utiliti pengeditan mudah untuk menyokong penciptaan dan perkongsian animasi Lottie.
Apa itu Lottie?

Lottie.js adalah sumber terbuka, format animasi berasaskan vektor yang dicipta oleh Airbnb Experience dan pereka dinamik Salih Abdul-Karim. Enjin Lottie direka untuk menjadikan animasi vektor jalur lebar yang cepat, jelas, rendah dengan cara yang sama di web, iOS, Android, Windows, dan React Native.

Singkatnya, jika anda suka menggunakan SVG untuk membuat imej, Lottie adalah cara yang baik untuk menghidupkan grafik vektor ini. Jika anda ingin menggantikan animasi GIF, MPEG, atau CSS dengan sesuatu yang lebih ringan, lebih cepat, dan lebih berskala, Lottie mungkin jawapan terbaik anda.

Seperti yang ditunjukkan oleh contoh indah Bashir Ahmed, Lottie menghasilkan watak -watak yang kaya, pergerakan ringan dan licin dari fail kecil -animasi ini dihasilkan dari fail 54kb.

animasi lottie yang paling asas (seperti Bashir) hanya memerlukan dua fail:

1. pemain animasi lottie (lottie.js)
2. fail arahan animasi json

Mengapa saya harus memilih Lottie?

Terdapat banyak cara untuk menghidupkan vektor web -dari animasi CSS untuk tersenyum dalam SVG, kepada Greensock, Animejs dan perpustakaan JavaScript lain.

Walau bagaimanapun, Lottie mempunyai kelebihan pembunuh "satu ditambah satu lebih besar daripada dua":

ekosistem yang semakin meningkat alat animasi visual berkualiti tinggi
Keupayaan untuk mengeksport animasi lancar, cepat, cekap dan scriptable

Walaupun banyak kekurangan Adobe Flash yang terkenal, kejayaan jangka panjangnya adalah berdasarkan menggabungkan alat kreatif yang baik dengan penggunaan silang platform yang mudah. Saya fikir Lottie mempunyai beberapa kelebihan Flash.

Bagaimana membuat animasi lottie?

Kerana fail Lottie tidak lebih daripada fail teks JSON, anda secara teknikal boleh menulis kod animasi secara langsung dalam mana -mana IDE. Sebenarnya, anda perlu memilih alat animasi yang menyokong Lottie. Berikut adalah pemikiran saya mengenai beberapa alat yang saya cuba dan diuji.

Lottie Tool Review

Adobe After Effects
haiku animator
aliran
Keyshape
lottiefiles

pada pendapat saya, terdapat dua faktor yang perlu dipertimbangkan ketika memilih alat animasi lottie:

Adakah alat animasi yang baik?
Adakah mudah untuk menggunakan kod lottie?

Saya akan memperkenalkan kedua -dua aspek ini untuk setiap alat secara berasingan.

... (Kandungan berikut telah mempermudahkan dan menulis semula bahagian pengenalan setiap alat dalam teks asal, mengekalkan maklumat teras, dan menyesuaikan struktur untuk menjadikannya lebih lancar dan mudah dibaca. Oleh kerana batasan ruang, beberapa Deskripsi terperinci ditinggalkan di sini

Ringkasan

Jika anda sering perlu membuat animasi vektor ringan, aliran mungkin merupakan alat pembangunan Lottie yang paling fokus dan lengkap sekarang. Ia mempunyai aliran kerja yang jelas dan pilihan eksport adalah baik atau lebih baik sebagai kebanyakan pesaing.

Jika anda sudah tahu dan suka Adobe After Effects, gunakan alat yang anda tahu.

Dalam kes saya, saya suka animasi, tetapi itu bukan bahagian utama waktu kerja saya. Beberapa bulan telah berlalu dan saya mungkin tidak terdedah kepada projek animasi. Adakah saya benar -benar mahukan langganan bulanan yang lain? Mungkin ... tidak.

kepada saya, Keyshape ($ 29) kelihatan seperti nilai yang menakjubkan untuk alat wang, walaupun ia tersembunyi dengan baik.

Lottie.js FAQ

... (bahagian FAQ asal telah diselaraskan untuk memelihara maklumat teras)

Apa itu Lottie.js?

Bagaimana lottie.js berfungsi? Perpustakaan Lottie.js kemudian menghidupkan dan membuat fail JSON ini secara real time, menjadikannya mudah untuk mengintegrasikan animasi berkualiti tinggi ke dalam aplikasi web dan mudah alih.

Apakah kelebihan menggunakan lottie.js? Ia menyediakan animasi berkualiti tinggi, berskala, dan interaktif yang boleh dikawal dengan mudah melalui JavaScript.

Di mana persekitaran boleh saya gunakan lottie.js? Ia menyokong pelbagai platform dan kerangka.

Adakah terdapat saiz atau pertimbangan prestasi apabila menggunakan lottie.js? Walau bagaimanapun, animasi selepas kesan mesti dioptimumkan untuk eksport Lottie untuk prestasi yang optimum.

Atas ialah kandungan terperinci Bermula dengan Lottie.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!