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

WBOY 转载: 2023-08-31 23:37:02 1018浏览

逐帧动画是动画中使用的一种技术，通过显示一系列顺序显示的静态图像来产生运动。通过快速连续显示图像来实现运动的外观。

在我们创建逐帧动画之前需要以下内容 -

一系列图像（帧）
使用 CSS 和 JavaScript 的网页

方法

使用 CSS 和 JavaScript 创建逐帧动画的过程相对简单。

第 1 步 – 首先，您需要创建一系列要连续显示的图像（帧）。

第 1 步 – 接下来，您需要使用 CSS 和 JavaScript 创建一个网页，该网页将快速连续加载和显示图像。

完整的工作代码示例

这里是一个完整的工作代码示例，说明如何使用 CSS 和 JavaScript 创建逐帧动画。该代码将连续加载并显示 2 个图像。

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