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

逐帧动画是一种动画技术，通过显示一系列静态图像来产生运动效果。通过快速连续地显示这些图像，可以实现运动的视觉效果。

在创建逐帧动画之前，需要准备以下内容：

  • 一系列图像（帧）

  • 包含 CSS 和 JavaScript 的网页

方法

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

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

步骤 2 – 接下来，你需要创建一个包含 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://tutorialspoint.com/static/images/logo-color.png" />
   <img src="https://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>

HTML

HTML 代码非常简单。它包含一个 id 为 "container" 的 div 元素。在这个 div 元素内，有两个 img 元素。这两个 img 元素是动画的帧。

CSS

CSS 代码为 div 元素和 img 元素设置样式。div 元素被赋予宽度和高度。img 元素在 div 元素内绝对定位。

JavaScript

JavaScript 代码是实现动画的关键。首先，代码获取对 div 元素和 img 元素的引用。接下来，代码定义一个名为 "currentImage" 的变量。此变量将用于跟踪当前显示的图像。

然后，代码定义一个名为 "changeImage" 的函数。此函数将隐藏当前图像并显示序列中的下一张图像。

最后，代码使用 setInterval 函数每 1000 毫秒（1 秒）调用一次 "changeImage" 函数。这将导致图像快速连续显示，从而产生运动的错觉。

就是这样！只需几行代码，你就可以创建一个简单的 CSS 和 JavaScript 逐帧动画。

更新于：2022年9月14日

695 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告