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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python中cPickle类使用方法详解
2018/08/27 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015年教师节主持词
2015/07/03 职场文书
个人合作协议范本
2015/08/06 职场文书
《少年闰土》教学反思
2016/02/18 职场文书