如何使用 CSS 和 JavaScript 建立逐幀動畫？
- WBOY轉載
- 2023-08-31 23:37:021530瀏覽
逐幀動畫是動畫中使用的技術，透過顯示一系列順序顯示的靜態圖像來產生運動。透過快速連續顯示影像來實現運動的外觀。
在我們創建逐幀動畫之前需要以下內容 -
一系列圖像（幀）
#使用 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中文網其他相關文章！