Animasi dengan Lottie

Animasi web bukan sahaja sangat menarik, tetapi juga meningkatkan penyertaan pengguna dan menukarkan pelawat kepada pelanggan. Fikirkan butang "suka" Twitter: Apabila anda mengklik untuk menyukai, gelembung berwarna-warni meresap di sekitar butang berbentuk jantung, dan butang secara beransur-ansur menjadi bulatan, dan akhirnya keadaan isi merah selepas seperti yang dipaparkan. Jika anda hanya mengisi garis bentuk jantung, kesannya akan menjadi lebih teruk. Rasa keseronokan dan kepuasan ini menggambarkan dengan sempurna bagaimana animasi dapat meningkatkan pengalaman pengguna.

Artikel ini akan memperkenalkan cara menggunakan Lottie untuk menjadikan Adobe selepas kesan animasi di laman web untuk mencapai kesan animasi yang kompleks seperti butang seperti Twitter.

Bodymovin adalah pemalam untuk Adobe selepas kesan yang mengeksport animasi ke format JSON; Lottie adalah perpustakaan yang boleh menjadikan animasi JSON ini secara asli di halaman mudah alih dan web. Ia dicipta oleh Hernan Torrisi. Jika anda berfikir, "Saya tidak menggunakan selepas kesan, jawatan ini mungkin bukan untuk saya", sila tunggu sebentar. Saya tidak menggunakan kesan selepas, sama ada, tetapi saya telah menggunakan Lottie dalam projek saya.

Sudah tentu, anda tidak perlu menggunakan Lottie untuk membuat animasi di laman web. Pendekatan lain adalah untuk merekabentuk animasi dari awal, tetapi ini boleh menjadi sangat memakan masa, terutamanya untuk jenis animasi yang kompleks yang Lottie baik untuk berurusan. Pilihan lain ialah menggunakan animasi GIF, yang mempunyai jenis animasi yang tidak terhad, tetapi saiz fail mereka biasanya dua kali lebih besar daripada fail JSON yang dihasilkan oleh Bodymovin.

Mari mula memahami bagaimana ia berfungsi.

Dapatkan fail json

Untuk menggunakan Lottie, kami memerlukan fail JSON yang mengandungi animasi selepas kesan. Nasib baik, Icons8 menawarkan banyak ikon animasi percuma yang terdapat di JSON, GIF, dan selepas format kesan.

Tambahkan skrip ke html

Kami juga perlu memperkenalkan perpustakaan JavaScript pemain bodymovin dalam HTML dan memanggil kaedah loadAnimation() . Kaedah asas adalah seperti berikut:

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

Animasi Aktivasi

Selepas animasi dimuatkan ke dalam bekas, kita boleh menggunakan pendengar acara untuk mengkonfigurasi kaedah pengaktifan dan mencetuskan tindakan animasi. Berikut adalah sifat yang ada:

• container : Muatkan elemen DOM animasi
• path : Laluan relatif ke fail JSON yang mengandungi animasi
• renderer : Format Animasi, termasuk SVG, Canvas dan HTML
• loop : Nilai Boolean, nyatakan sama ada animasi dimainkan gelung
• autoplay : Nilai Boolean, tentukan sama ada animasi akan dimainkan secara automatik selepas memuatkan
• name : Nama Animasi, Digunakan untuk Rujukan Masa Depan

Perhatikan bahawa dalam contoh terdahulu, harta animationData telah dikomentari. Ia saling eksklusif untuk atribut path dan merupakan objek yang mengandungi data animasi yang dieksport.

Cuba contohnya

Saya ingin menunjukkan cara menggunakan lottie dengan ikon kawalan animasi/jeda ini dari Icons8:

Perpustakaan Pemain Bodymovin dihoskan secara statik di sini dan boleh diletakkan terus ke HTML, tetapi juga boleh digunakan sebagai pakej:

 NPM Pasang Lottie-Web ### atau Benang Tambah Lottie-Web

Kemudian, dalam fail HTML anda, sertakan skrip dari folder Dist pakej yang dipasang. Anda juga boleh mengimport perpustakaan dari Skypack sebagai modul:

 import lottieweb dari "https://cdn.skypack.dev/lottie-web";

Pada masa ini, butang jeda kami berada dalam main balik gelung dan dimainkan secara automatik:

Mari kita ubahnya supaya animasi dicetuskan oleh tindakan itu.

Animasi mencetuskan

Jika autoplay dimatikan, kami akan mendapat ikon jeda statik kerana itulah cara mengeksport dari selepas kesan.

Tetapi, jangan risau! Lottie menyediakan beberapa kaedah yang boleh digunakan untuk contoh animasi. Maksudnya, dokumentasi pakej NPM lebih komprehensif.

Kita perlu melakukan beberapa perkara:

• Pada mulanya dipaparkan sebagai status "bermain".
• Tetapkan animasinya untuk "jeda" apabila diklik
• Kemudian tukar animasi antara kedua -dua apabila diklik.

Kaedah goToAndStop(value, isFrame) sangat sesuai di sini. Apabila animasi dimuatkan ke dalam bekas, kaedah ini menetapkan animasi untuk pergi ke nilai yang disediakan dan kemudian berhenti di sana. Dalam kes ini, kita perlu mencari nilai animasi apabila dimainkan dan menetapkannya. Parameter kedua menentukan sama ada nilai yang disediakan adalah berdasarkan masa atau bingkai. Ia adalah jenis boolean dengan nilai lalai palsu (iaitu, nilai berasaskan masa). Oleh kerana kami mahu menetapkan animasi untuk bermain bingkai, kami menetapkannya menjadi benar.

Menetapkan animasi ke titik tertentu pada garis masa berdasarkan garis masa berdasarkan nilai. Sebagai contoh, nilai masa pada permulaan animasi (pada jeda) adalah 1. Walau bagaimanapun, animasi ditetapkan kepada nilai bingkai tertentu berdasarkan nilai bingkai. Menurut Techterms, bingkai adalah imej tunggal dalam urutan imej. Jadi jika saya menetapkan nilai bingkai animasi kepada 5, animasi akan pergi ke bingkai kelima dalam animasi (dalam kes ini "urutan imej").

Selepas mencuba nilai yang berbeza, saya mendapati bahawa animasi memainkan dari nilai bingkai 11 hingga 16. Jadi saya memilih 14 untuk selamat.

Sekarang kita perlu menghidupkan supaya ia berubah untuk berhenti sejenak apabila pengguna mengkliknya dan bermain apabila pengguna mengkliknya lagi. Seterusnya, kita memerlukan kaedah playSegments(segments, forceFlag) . Parameter segments adalah jenis array yang mengandungi dua nombor. Nombor pertama dan kedua mewakili bingkai pertama dan terakhir yang harus dibaca oleh kaedah. forceFlag adalah nilai boolean yang menunjukkan sama ada kaedah itu harus dicetuskan dengan segera. Jika ditetapkan kepada palsu, ia akan menunggu sehingga animasi memainkan nilai yang ditentukan sebagai bingkai pertama dalam pelbagai segments . Jika benar, klip akan dimainkan dengan segera.

Di sini saya membuat bendera untuk menunjukkan kapan untuk memainkan klip dari bermain untuk berhenti sejenak, dan klip dari jeda untuk bermain. Saya juga menetapkan Boolean forceFlag menjadi benar kerana saya mahu penukaran itu dilakukan dengan segera.

Itu sahaja! Kami memberikan animasi dari selepas kesan ke penyemak imbas! Terima kasih Lottie!

Kanvas?

Saya lebih suka menggunakan SVG sebagai penerima kerana ia menyokong skala, yang saya fikir boleh menjadikan animasi yang paling jelas. Rendering kanvas tidak begitu baik dan tidak menyokong skala. Walau bagaimanapun, jika anda ingin memberikan animasi dengan kanvas sedia ada, anda perlu melakukan beberapa operasi tambahan.

Lebih banyak operasi

Terdapat juga beberapa peristiwa dalam keadaan animasi yang juga boleh digunakan untuk mengkonfigurasi tingkah laku animasi.

Sebagai contoh, dalam pen di bawah, saya menambah dua pendengar acara dalam animasi dan menetapkan beberapa teks untuk dipaparkan apabila acara itu dicetuskan.

Semua acara boleh didapati dalam dokumentasi untuk pakej NPM. Dengan semua ini, saya katakan sesuatu yang lain, mari kita jadikan beberapa animasi yang menakjubkan!

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