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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
javascript基本算法汇总
Mar 09 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
Web应用开发TypeScript使用详解
May 25 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将数据导入到Foxmail
2006/10/09 PHP
PHP个人网站架设连环讲(四)
2006/10/09 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
简单的辞职信范文
2014/01/18 职场文书
药店主任岗位责任制
2014/02/10 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Python竟然能剪辑视频
2021/05/25 Python