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

动画思路：

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. Android之解析XML

    1.XML:可扩展标记语言. 可扩展标记语言是一种很像超文本标记语言的标记语言. 它的设计宗旨是传输数据,而不是显示数据. 它的标记没有被预定义.需要自行定义标签. 它被设计为具有自我描述性. 是W3 ...

  2. docker4dotnet #1 – 前世今生 & 世界你好

    作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...

  3. REGEX例子

    作为REGEX的例子,代码9.3显示了一个给定的文件有多少行,具有给定的模式,通过命令行输入(注:有更有效率的方式来实现这个功能,如Unix下的grep命令,在这里只是给出了另一种方式).这个程序像下 ...

  4. C#单元测试面面观

    标题有点标题党,但相信各位看完这篇文章一定会所收获,如果之前没有接触过单元测试或了解不深通过本文都能对单元测试有个全新认识.本文的特点是不脱离实际,所测试的代码都是常见的模式. 写完这篇文章后,我看了 ...

  5. 新手如何在gdb中存活

    网络上已经有很多gdb调试的文章了,为什么我还要写这篇文章呢,因为本文是写给gdb新手的,目的就是通过一个简单的例子来让新手很快上手.一旦上手入门了,其他的问题就可以自己去搜索搞定了.右边是gdb的L ...

  6. git 使用

    三个状态 文件由 git 维护三中状态 modified:文件被改动,但还没有被提交 staged:标记被改动的文件到下次需要提交的文件快照 committed:文件已经被安全保存到本地 可以使用命令 ...

  7. golang的安装

    整理了一下,网上关于golang的安装有三种方式(注明一下,我的环境为CentOS-6.x, 64bit) 方式一:yum安装(最简单) rpm -Uvh http://dl.fedoraprojec ...

  8. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  9. 微信小程序开发调试工具

    为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的 开发者工具 ,集成了开发调试.代码编辑及程序发布等功能. 扫码登录 启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所 ...

  10. Android-RecyclerView

    众所周知,RecyclerView是Google公司推出的V7包中的一个重要的控件,非常方便,可以替代现有的ListView和Gridview等控件,它功能很强大,灵活性好,扩展性强,还自带VIewH ...