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


Posted in Javascript onDecember 19, 2019

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

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

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

动画思路:

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

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

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

第一步:基本框架,鱼身体

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

第二步:摇动尾巴

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

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

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

第三步:眨眼睛

1.图片资源有2张,从eye0.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();
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
axios基本入门用法教程
Mar 25 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
JS实现水平移动与垂直移动动画
Dec 19 #Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 #Javascript
d3.js实现图形拖拽
Dec 19 #Javascript
d3.js实现图形缩放平移
Dec 19 #Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 #Javascript
echarts实现折线图的拖拽效果
Dec 19 #Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 #Javascript
You might like
给初学PHP的5个入手程序
2006/11/23 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
JS 常用校验函数
2009/03/26 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python解析中国天气网的天气数据
2014/03/21 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
OpenCV 模板匹配
2019/07/10 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
竞聘演讲稿
2014/04/24 职场文书
2015大学生实训报告
2014/11/05 职场文书
骨干教师申报材料
2014/12/17 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Python jiaba库的使用详解
2021/11/23 Python