Bagaimana untuk membuat animasi bingkai demi bingkai menggunakan CSS dan JavaScript?-tutorial js-php.cn

Bagaimana untuk membuat animasi bingkai demi bingkai menggunakan CSS dan JavaScript?

WBOY

Lepaskan： 2023-08-31 23:37:02

ke hadapan

1517 orang telah melayarinya

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.

如何使用 CSS 和 JavaScript 创建逐帧动画？ Sebelum kami membuat animasi bingkai demi bingkai kami memerlukan perkara berikut -

Siri imej (bingkai)

Halaman web menggunakan CSS dan JavaScript
kaedah

Langkah 1 – Mula-mula, anda perlu mencipta satu siri imej (bingkai) yang ingin anda paparkan secara berterusan.

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>

Salin selepas log masuk

HTML

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.

CSS

Kod CSS untuk menggayakan elemen div dan elemen img. Elemen div diberi lebar dan tinggi. Elemen img berada di dalam elemen div.

JavaScript

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.

Kemudian kod mentakrifkan fungsi yang dipanggil "changeImage". Fungsi ini akan menyembunyikan imej semasa dan memaparkan imej seterusnya dalam urutan.

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!