Suatu hari desainer UI kami mendatangi saya dan berkata bahwa saya harus mengganti animasi yang saya tulis di program dengan animasi json yang mereka berikan kepada saya. Alasannya adalah beberapa animasi sangat rumit dan tidak dapat mencapai efek yang diharapkan jika saya menulisnya sendiri ( Ketika saya menulis ini, tiba-tiba saya memikirkan sebuah pertanyaan, mengapa Anda tidak menggunakan gif untuk animasi yang begitu rumit? Pengembang Android yang duduk di hadapan saya menjawab bahwa kualitas gif mungkin tidak tinggi saat diputar, oke, saya percaya itu)
SAYA:? ? ? ? Klien dapat menambahkan animasi json. Saya belum pernah mendengar halaman H5 bisa membaca animasi json.
Perancangnya tampak yakin dan berkata ya, ada versi web.
Saat saya menulis ini, saya sangat ingin memuji gadis desainer kami. Hampir banyak solusi bagus ditemukan di bawah tekanan mereka (oh, mereka juga dapat menulis halaman H5... mereka ingin saya seri kegunaannya.
Jadi pertanyaannya adalah, bagaimana cara menggunakan animasi json di halaman H5?
Cara menggunakan animasi json dalam halaman H5Saat ini, desainer mengirimi saya tautan, lihat di sini lottie-web; Saya mengkliknya untuk mempelajarinya lebih lanjut. Ini adalah perpustakaan animasi yang bersumber terbuka oleh Airbnb Perancang hanya perlu mengekspor file JSON melalui animasi yang dibuat oleh AE perangkat lunak, dan kemudian front-end menggunakan Lottie untuk langsung memuat file JSON untuk menghasilkan animasi. Ini tidak mengharuskan desainer untuk memotong banyak GIF, juga tidak perlu melakukan gambar yang rumit. Ini membunuh dua burung dengan satu batu , dan Lottie tersedia di semua platform, termasuk ios, Android, web, dan React. Asli dapat digunakan, dan memerlukan lebih sedikit memori serta memuat dengan lancar. (Mengapa saya baru menemukan hal ajaib sekarang?
Setelah banyak bicara, bagaimana cara menggunakannya di halaman H5?
Ini sangat sederhana. Folder yang dibuat oleh desainer dikirimkan kepada Anda (desainer hanya perlu menambahkan plug-in lottie di AE dan mengekspornya). Setelah membukanya, akan terlihat seperti ini tahu cara kerjanya. Menggunakannya (jadi saya masih menulis artikel teknis di sini)
Terlepas dari leluconnya, sebenarnya saya menemui banyak kendala saat menggunakannya. Berikut beberapa hal yang perlu diperhatikan saat menggunakannya.
1. Banyak hal inline di demo.html yang kurang sedap dipandang saat digunakan.Perhatikan lebih dekat, sebenarnya demo.html menempatkan js dan json di dalamnya. Saat ini, kita dapat memisahkan js dan json secara terpisah.
<tipe skrip=teks/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
Data json yang diperlukan untuk animasi ditempatkan pada file data.json, namun format data pada file json yang diberikan adalah sebagai berikut (terlalu panjang dan tidak dapat dipotong)
Jika Anda ingin menggunakan skrip untuk memasukkan file json dalam HTML terpisah, kesalahan akan dilaporkan, jadi Anda perlu memodifikasi file json, menambahkan variabel di depan, dan menetapkan nilai. Seperti yang ditunjukkan di bawah ini:
Dengan cara ini, Anda dapat mengimpor json dengan cara yang sama seperti file js.
<skrip tipe=teks/javascript src=./data.json></script>
Dengan cara ini, demo.html yang tersedia dikurangi menjadi sebagai berikut
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; margin: 0px tinggi: 100%; : tersembunyi; } #lottie{ warna latar:#fff; lebar:100%; tinggi:100%; tampilan:blok; Translate3d(0,0,0); perataan teks: tengah; opasitas: 1; </style></head><body><div id=lottie></div><tipe skrip=teks/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { container: document.getElementById('lottie'), renderer: 'svg', loop: true, autoplay: true, animationData: animationData }; anim; anim = lottie.loadAnimation(params);</script></body></html>
Tentunya jika Anda menggunakan pemrograman js modular, Anda bisa langsung mengimpornya tanpa mengubah data.json, sebagai berikut:
impor data animasi dari './data.json'2. Sesuaikan animasi ke perangkat seluler
Alasan mengapa menurut saya ini jebakan adalah karena animasi yang diberikan desainer kepada saya adalah layar penuh dan tidak transparan. Kemudian dia meminta saya untuk memposisikan animasi dengan lebar 100% dan intersepsi terpusat secara vertikal. Saya mencobanya browser. , di bawah layar 360*640, lebarnya 100%, ekspresinya sebagai berikut (sepertinya tingginya 100%, lebarnya disesuaikan dengan bagian tengah, dan warna latar belakang hitam bocor di kedua sisi. , lihat bagian berbingkai biru pada gambar di bawah)
Beralih ke layar iPhone
Tata letak ini sangat familiar. Perilakunya sama seperti ketika atribut objek-fit dari img disetel ke mengandung (objek-fit juga merupakan harta karun. Siswa yang tertarik dapat mempelajarinya, sangat mudah digunakan)
Untuk mengatasi kebutuhan desainer di sini, saya terutama menambahkan kode berikut:
js bagian: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); %; tinggi:100%; transformasi: terjemahan3d(0,0,0); perataan teks: tengah; kiri: 0; indeks-z: 3; tampilan: fleksibel; arah fleksibel: baris; konten rata: tengah;
Efek akhir:
MeringkaskanTangkapan layar gambar di atas semuanya statis, tetapi sebenarnya memiliki efek dinamis. Saya tidak tahu cara menambahkan animasi jadi saya tidak melakukannya.
Cakupan aplikasi: Saya rasa umumnya animasi layar penuh atau sebagian kompleks dapat menggunakan metode ini. Ini lebih halus daripada GIF dan memiliki kompatibilitas yang baik. Beberapa produk Android menggunakan metode ini untuk membuka layar dengan cara yang keren, seperti halaman H5. Jika demikian, animasi sederhana biasanya dapat diimplementasikan oleh program Anda sendiri, dan Anda dapat menghindari kesalahan.
Tautan referensi:
situs resmi lottie
alamat github lottie-web
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.