Comment créer une animation image par image en utilisant CSS et JavaScript ?-js tutoriel-php.cn

Comment créer une animation image par image en utilisant CSS et JavaScript ?

WBOY

Libérer： 2023-08-31 23:37:02

avant

1534 Les gens l'ont consulté

如何使用 CSS 和 JavaScript 创建逐帧动画？

L'animation image par image est une technique utilisée dans l'animation pour créer du mouvement en affichant une série d'images statiques affichées séquentiellement. Obtenez une impression de mouvement en affichant des images en succession rapide.

Avant de créer une animation image par image, nous avons besoin des éléments suivants :

Une série d'images (cadres)
Pages Web utilisant CSS et JavaScript

Méthode

Le processus de création d'une animation image par image à l'aide de CSS et JavaScript est relativement simple.

Étape 1 – Tout d’abord, vous devez créer une série d’images (cadres) que vous souhaitez afficher en continu.

Étape 1 – Ensuite, vous devez utiliser CSS et JavaScript pour créer une page Web qui chargera et affichera les images en succession rapide.

Exemple de code de travail complet

Voici un exemple de code fonctionnel complet montrant comment créer une animation image par image à l'aide de CSS et JavaScript. Ce code chargera et affichera 2 images successivement.

<!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>

Copier après la connexion

HTML

Le code HTML est très simple. Il se compose d'un élément div avec l'identifiant "conteneur". Il y a 2 éléments img à l'intérieur de l'élément div. Ces éléments img sont les images de l'animation.

CSS

Code CSS pour styliser les éléments div et les éléments img. L'élément div reçoit une largeur et une hauteur. L'élément img est absolument à l'intérieur de l'élément div.

JavaScript

Le code JavaScript est l'endroit où la magie opère. Tout d’abord, le code obtient des références à l’élément div et à l’élément img. Ensuite, le code définit une variable appelée « currentImage ». Cette variable sera utilisée pour garder une trace de l'image actuellement affichée.

Ensuite, le code définit une fonction appelée "changeImage". Cette fonction masquera l'image actuelle et affichera l'image suivante dans la séquence.

Enfin, le code utilise la fonction setInterval pour appeler la fonction "changeImage" toutes les 1000 millisecondes (1 seconde). Cela fera apparaître des images en succession rapide, créant l’illusion de mouvement.

C'est tout ! Avec seulement quelques lignes de code, vous pouvez créer une simple animation image par image avec CSS et JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!