js通过循环多张图片实现动画效果

2023-08-04 06:48:04 303

本文实例为大家分享了js通过循环多张图片实现动画展示的具体代码，供大家参考，具体内容如下

以小鱼摇尾巴和眨眼睛为例

动画思路：

1.将图片资源放在数组里面

2.通过计时器来设定间隔时间

3.通过计数器来取相应的图片

第一步：基本框架，鱼身体

document.body.onload=game;

varcan1,
ctx1,
canWidth,
canHeight,
lastTime=Date.now(),
deltaTime=0,
body=newImage();



functiongame(){
init();
gameloop();
}

functioninit(){
can1=document.getElementById("canvas1");//fonr--fishes,UI,circles,dust
ctx1=can1.getContext("2d");
canWidth=can1.width;
canHeight=can1.height;

body.src='./src/baby.png';
}

functionbodyDraw(){
ctx1.drawImage(body,-body.width*0.5,-body.height*0.5);
}

functiongameloop(){
requestAnimFrame(gameloop);

//时间帧间隔
varnow=Date.now();
deltaTime=now-lastTime;
lastTime=now;

ctx1.clearRect(0,0,canWidth,canHeight);

bodyDraw();
}



window.requestAnimFrame=(function(){
returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(/*functionFrameRequestCallback*/callback,/*DOMElementElement*/element){
returnwindow.setTimeout(callback,1000/60);
};
})();

第二步：摇动尾巴

1.图片资源有8张，从tail0.png~tail7.png

2.尾巴是匀速的运动，间隔时间为固定值

varbTailTimer,//计时器
bTailCount,//计数器
babyTail=[];//图片数组

functioninit(){
//尾巴初始化
bTailTimer=0;8bTailCount=0;9for(vari=0;i<8;i++){
babyTail[i]=newImage();
babyTail[i].src='./src/tail'+i+'.png';
}
}

functiontailDraw(){
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);
}

functiongameloop(){
ctx1.clearRect(0,0,canWidth,canHeight);

bodyDraw();
tailDraw();
}

第三步：眨眼睛

1.图片资源有2张，从eye0.png~eye7.png

2.眼睛睁开时间不定时，闭上时间固定值

varbEyeTimer,
bEyeCount,
bEyeInterval,//时间间隔变量
babyEye=[];

functioninit(){
//眼睛初始化
bEyeTimer=0;
bEyeCount=0;
bEyeInterval=1000;//间隔时间
for(vari=0;i<2;i++){
babyEye[i]=newImage();
babyEye[i].src='./src/Eye'+i+'.png';
}
}

functioneyeDraw(){
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;
}
}
}

functiongameloop(){
eyeDraw();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js通过循环多张图片实现动画效果

热门推荐

随机推荐