本文介绍如何利用 JavaScript 和 Canvas 技术，通过循环加载多张图片实现小鱼的游动和眨眼动画。核心思路包括将图片资源存入数组，使用计时器控制帧切换间隔，并通过计数器索引当前显示的图片。文章详细拆解了鱼身、尾巴匀速摆动及眼睛随机眨眼的实现逻辑，提供了完整的代码示例与关键参数说明。
JavaScript Canvas 实现小鱼游动与眨眼动画详解
本文提供了使用 JavaScript 通过循环多张图片来实现动画展示的具体代码示例，供读者参考学习。
以小鱼摇尾巴和眨眼睛作为具体案例进行演示。
动画实现的核心思路如下：
首先，将所有相关的图片资源存放在一个数组中。
其次，利用计时器来设定图片切换的固定间隔时间。
最后，通过计数器获取当前应显示的图片索引。
构建鱼身基本框架
第一步构建基本框架，绘制鱼的身体部分。
<body>
<canvas id="canvas1" width="800" height="600"></canvas>
</body>
document.body.onload = game;
var can1,
ctx1,
canWidth,
canHeight,
lastTime = Date.now(),
deltaTime = 0,
body = new Image();
function game() {
init();
gameloop();
}
function init() {
can1 = document.getElementById("canvas1"); //fonr--fishes, UI, circles, dust
ctx1 = can1.getContext("2d");
canWidth = can1.width;
canHeight = can1.height;
body.src = './src/baby.png';
}
function bodyDraw(){
ctx1.drawImage( body, -body.width * 0.5, -body.height * 0.5);
}
function gameloop() {
requestAnimFrame(gameloop);
//时间帧间隔
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
ctx1.clearRect(0, 0, canWidth, canHeight);
bodyDraw();
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();实现尾巴匀速摆动动画
第二步实现尾巴摇动的动画效果。
尾巴动画涉及 8 张图片，文件名从 tail0.png 到 tail7.png。
尾巴运动保持匀速，因此图片切换的间隔时间为固定值。
var bTailTimer, //计时器
bTailCount, //计数器
babyTail = []; //图片数组
function init() {
//尾巴初始化
bTailTimer = 0; 8 bTailCount = 0; 9 for (var i = 0; i < 8; i++) {
babyTail[i] = new Image();
babyTail[i].src = './src/tail' + i +'.png';
}
}
function tailDraw(){
bTailTimer += deltaTime;
if(bTailTimer > 50){
bTailCount = (bTailCount + 1)% 8;
bTailTimer %= 50; //初始化计数器
}
ctx1.drawImage( babyTail[bTailCount], -babyTail[bTailCount].width * 0.5, -babyTail[bTailCount].height * 0.5);
}
function gameloop() {
ctx1.clearRect(0, 0, canWidth, canHeight);
bodyDraw();
tailDraw();
}实现眼睛随机眨眼动画
第三步实现眼睛眨动的动画效果。
眼睛动画涉及 2 张图片，文件名从 eye0.png 到 eye1.png（注：原文提及 eye7.png 疑为笔误，实际代码仅循环 2 张）。
眼睛睁开的持续时间是不固定的随机值，而闭眼保持的时间为固定值。
var bEyeTimer,
bEyeCount,
bEyeInterval, //时间间隔变量
babyEye = [];
function init() {
//眼睛初始化
bEyeTimer = 0;
bEyeCount = 0;
bEyeInterval = 1000; //间隔时间
for (var i = 0; i < 2; i++) {
babyEye[i] = new Image();
babyEye[i].src = './src/Eye' + i + '.png';
}
}
function eyeDraw() {
bEyeTimer += deltaTime;
if (bEyeTimer > bEyeInterval)
{
bEyeCount = (bEyeCount + 1)% 2;
bEyeTimer %= bEyeInterval;
if (bEyeCount == 0)
{
//眼睛睁开保持的时间随机
bEyeInterval = Math.random() * 1500 + 2000; //[2000,3500)
} else
{
//眼睛闭上保持时间固定为100ms
bEyeInterval = 100;
}
}
}
function gameloop() {
eyeDraw();
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。