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 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
JS中表单的使用小结
Jan 11 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
CI框架Session.php源码分析
2014/11/03 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
利用Python开发实现简单的记事本
2016/11/15 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python 自动批量打开网页的示例
2019/02/21 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
Python 支持向量机分类器的实现
2020/01/15 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
毕业生自我鉴定范文
2013/11/08 职场文书
中学生校园广播稿
2014/01/16 职场文书
决心书标准格式
2014/03/11 职场文书
个人委托书范文
2015/01/28 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书