Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat animasi bingkai demi bingkai menggunakan CSS dan JavaScript?
Animasi bingkai demi bingkai ialah teknik yang digunakan dalam animasi untuk mencipta pergerakan dengan memaparkan satu siri imej statik yang dipaparkan secara berurutan. Capai rupa pergerakan dengan memaparkan imej secara berturut-turut.
Sebelum kami membuat animasi bingkai demi bingkai kami memerlukan perkara berikut -
Siri imej (bingkai)
Halaman web menggunakan CSS dan JavaScript
kaedah
Langkah 1 – Seterusnya, anda perlu menggunakan CSS dan JavaScript untuk mencipta halaman web yang akan memuatkan dan memaparkan imej secara berturut-turut.
Contoh kod kerja penuh
Berikut ialah contoh kod kerja lengkap tentang cara mencipta animasi bingkai demi bingkai menggunakan CSS dan JavaScript. Kod ini akan memuatkan dan memaparkan 2 imej berturut-turut.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Frame by Frame Animation</title> <style> #container { width: 400px; height: 400px; position: relative; } #container img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="container"> <img src="https://www.tutorialspoint.com/static/images/logo-color.png" /> <img src="https://www.tutorialspoint.com/images/QAicon-black.png" /> </div> <script> var container = document.getElementById('container'); var images = container.getElementsByTagName('img'); var currentImage = 0; function changeImage() { images[currentImage].style.display = 'none'; currentImage = (currentImage + 1) % images.length; images[currentImage].style.display = 'block'; } setInterval(changeImage, 1000); </script> </body> </head>
Kod HTML sangat mudah. Ia terdiri daripada elemen div dengan id "bekas". Terdapat 2 elemen img di dalam elemen div. Elemen img ini ialah bingkai animasi.
Kod CSS untuk menggayakan elemen div dan elemen img. Elemen div diberi lebar dan tinggi. Elemen img berada di dalam elemen div.
Kod JavaScript ialah tempat keajaiban berlaku. Pertama, kod mendapat rujukan kepada elemen div dan elemen img. Seterusnya, kod tersebut mentakrifkan pembolehubah yang dipanggil "currentImage". Pembolehubah ini akan digunakan untuk menjejaki imej yang sedang dipaparkan.
Akhir sekali, kod menggunakan fungsi setInterval untuk memanggil fungsi "changeImage" setiap 1000 milisaat (1 saat). Ini akan menyebabkan imej muncul secara berturut-turut, mewujudkan ilusi gerakan.
Itu sahaja! Dengan hanya beberapa baris kod, anda boleh mencipta animasi bingkai demi bingkai yang mudah dengan CSS dan JavaScript.
Atas ialah kandungan terperinci Bagaimana untuk membuat animasi bingkai demi bingkai menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!