逐帧动画（Frame-by-Frame Animation）是一种通过展示一系列静态图片（帧）来模拟动态效果的动画技术，在HTML5中，可以通过多种方式实现逐帧动画，例如使用<canvas>元素、CSS3动画、SVG动画等，本文将详细介绍如何使用HTML5中的<canvas>元素来创建逐帧动画。
1、准备逐帧图片
你需要准备一系列静态图片，这些图片将作为动画的帧，确保所有图片具有相同的尺寸和格式（如PNG或JPEG），你可以使用图像编辑软件（如Adobe Photoshop或GIMP）来创建这些图片。
2、创建HTML页面
在HTML文件中，创建一个<canvas>元素，并为其分配一个ID，以便在JavaScript中引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5逐帧动画</title>
</head>
<body>
<canvas id="animationCanvas" width="400" height="300"></canvas>
<script src="animation.js"></script>
</body>
</html>
3、编写JavaScript代码
在一个名为animation.js的JavaScript文件中，编写以下代码：
// 获取canvas元素
var canvas = document.getElementById('animationCanvas');
var ctx = canvas.getContext('2d');
// 图片帧数组
var frames = [];
var frameIndex = 0;
var frameCount = 0;
// 加载图片帧
function loadFrames() {
for (var i = 0; i < 10; i++) { // 假设有10帧
var img = new Image();
img.onload = function() {
frameCount++;
if (frameCount === 10) { // 所有图片加载完成
startAnimation();
}
};
img.src = 'frame' + i + '.png'; // 假设图片命名为frame0.png, frame1.png, ..., frame9.png
frames.push(img);
}
}
// 开始动画
function startAnimation() {
setInterval(function() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制当前帧
ctx.drawImage(frames[frameIndex], 0, 0, canvas.width, canvas.height);
// 更新帧索引
frameIndex++;
if (frameIndex >= frames.length) {
frameIndex = 0; // 循环播放
}
}, 100); // 动画间隔时间，可以根据需要调整
}
// 加载图片帧
loadFrames();
在上述代码中，我们首先创建了一个<canvas>元素的引用，并初始化了一个二维绘图上下文，我们创建了一个名为frames的数组来存储图片帧，并定义了frameIndex和frameCount变量来跟踪当前帧和已加载的帧数。loadFrames函数负责加载所有图片帧，并在所有图片加载完成后调用startAnimation函数。
startAnimation函数设置了一个定时器，每隔一定时间（例如100毫秒）更新画布上的当前帧，通过循环播放frameIndex，我们可以实现动画的连续播放。
4、测试动画
将HTML和JavaScript文件保存在同一个文件夹中，并在浏览器中打开HTML文件，你应该能看到逐帧动画在<canvas>元素中播放。
逐帧动画是一种简单且易于实现的动画技术，适用于需要展示一系列静态图片的场景，通过HTML5的<canvas>元素和JavaScript，你可以轻松地创建出丰富的逐帧动画效果。