首頁 > web前端 > js教程 > 如何使用 CSS 和 JavaScript 建立逐幀動畫?

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

WBOY
發布: 2023-08-31 23:37:02
轉載
1534 人瀏覽過

如何使用 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>
登入後複製

HTML

HTML 程式碼非常簡單。它由一個 id 為「container」的 div 元素組成。 div 元素內有 2 個 img 元素。這些 img 元素是動畫的幀。

CSS

CSS 程式碼設定 div 元素和 img 元素的樣式。 div 元素被賦予寬度和高度。 img 元素絕對位於 div 元素內。

JavaScript

JavaScript 程式碼是奇蹟發生的地方。首先,程式碼會取得 div 元素和 img 元素的參考。接下來,程式碼定義一個名為「currentImage」的變數。該變數將用於追蹤當前正在顯示的圖像。

然後程式碼定義了一個名為「changeImage」的函數。此函數將隱藏目前影像並顯示序列中的下一個影像。

最後,程式碼使用 setInterval 函數每 1000 毫秒(1 秒)呼叫「changeImage」函數。這將導致影像快速連續顯示,產生運動的錯覺。

這就是全部內容了!只需幾行程式碼,您就可以建立一個簡單的 CSS 和 JavaScript 逐幀動畫。

以上是如何使用 CSS 和 JavaScript 建立逐幀動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板