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

动画思路：

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;     bTailCount = 0;     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();

  }

js通过循环多张图片实现动画效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. 原生html，css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  3. wpf image控件循环显示图片 以达到动画效果 问题及解决方案

    1>最初方案: 用wpf的image控件循环显示图片,达到动画效果,其实就是在后台代码动态改变Image.Source的值,关键代码: ; i < ; i++)//六百张图片 { Bitm ...

  4. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  5. 利用 :before :after伪类实现鼠标悬浮动画效果

    1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  8. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  9. Tween.js 动画效果

    一.apply,和call的用法. 先来一个与本次博文无关的东西,就是apply和call的用法.其实apply和call的用法都一样,只是他们的传参不一样.apply是数组,而call是单独的传,类 ...

随机推荐

  1. SQL 约束

    先用设计器创建约束.再用代码创建约束.数据库约束是为了保证数据的完整性(正确性)而实现的一套机制见文件Employee.sql非空约束(选择复选框)主键约束(PK) primary key const ...

  2. [PHP源码阅读]explode和implode函数

    explode和implode函数主要用作字符串和数组间转换的操作,比如获取一段参数后根据某个字符分割字符串,或者将一个数组的结果使用一个字符合并成一个字符串输出.在PHP中经常会用到这两个函数,因此 ...

  3. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  4. SSH免密码登录

    每次用SSH登录服务器都要输入密码,次数多了就觉得有些麻烦,反正是自己个人用的电脑,安全应该有保障,如何能直接登录上去而不需要输入密码呢?其实一句话就讲清楚了:把自己公钥放在服务器上. Linux客户 ...

  5. 闲话RPC调用

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 自SOA架构理念提出以来,应用程序间如何以最低耦合度通信的问题便呈现在所有架构师面前. 互联网系统的复杂度让我们不 ...

  6. 工欲善其事，必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧

    之前一篇<工欲善其事,必先利其器.VS2013全攻略(安装,技巧,快捷键,插件)!> 看到很多朋友回复和支持,非常感谢,尤其是一些拍砖的喷油,感谢你们的批评,受益良多. 我第一份工作便是W ...

  7. Convert.ToInt32()、int.Parse()和(int)三者的区别

    Convert.ToInt32将object类类型转换成int类型,如Convert.ToInt32(session["shuzi"]); (int)适合简单数据类型之间的转换: ...

  8. vue-router(2.0)

    用Vue.js+vue-router创建单页应用是比较简单的.使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只要配置组件和路由映射,然后告诉vue-rout ...

  9. Matlab 利用参数方程绘制空心球体

    基本原理: 实质为利用球面参数方程,利用网格化数据绘制 x=R*sin(theta)*cos(phi) y=R*sin(theta)*sin(phi) z=R*cos(theta) 绘制函数: fun ...

  10. Python标准模块--built-ins函数

    1.Python内置函数 2.Python内置函数举例 2.1 数学运算 abs,计算绝对值: >>> abs(-1) 1 >>> abs(3) 3 round,四 ...