如何使用 CSS 和 JavaScript 建立逐幀動畫？-js教程-PHP中文網

如何使用 CSS 和 JavaScript 建立逐幀動畫？

WBOY

發布： 2023-08-31 23:37:02

轉載

1499 人瀏覽過

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

逐幀動畫是動畫中使用的技術，透過顯示一系列順序顯示的靜態圖像來產生運動。透過快速連續顯示影像來實現運動的外觀。

在我們創建逐幀動畫之前需要以下內容 -

一系列圖像（幀）
#使用 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>

登入後複製