如何使用 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.tw/static/images/logo-color.png" />
   <img src="https://tutorialspoint.tw/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 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告