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

动画思路：

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. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  2. C#与C++的发展历程第二 - C#4.0再接再厉

    系列文章目录 1. C#与C++的发展历程第一 - 由C#3.0起 2. C#与C++的发展历程第二 - C#4.0再接再厉 开始本系列的第二篇,这篇文章中将介绍C#4.0中一些变化,如C++有类似功 ...

  3. 在多线程编程中lock（string）{...}隐藏的机关

    常见误用场景:在订单支付环节中,为了防止用户不小心多次点击支付按钮而导致的订单重复支付问题,我们用 lock(订单号) 来保证对该订单的操作同时只允许一个线程执行. 这样的想法很好,至少比 lock( ...

  4. Java 程序的打包、签名和验证

    参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以直接找到这个总入口 Java SE 8 Document ...

  5. 【初探Spring】------Spring IOC（一）

    IOC:Inversion of Control(控制反转).IOC它所体现的并不是一种技术,而是一种思想,一种将设计好的对象交给容器来管理的思想.IOC的核心思想就体现在控制.反转这两个词上面,要理 ...

  6. MySQL基础之索引

    这段时间看了好多东西却没有总结,今天在这里写一写 关于索引 索引是一种提高查询效率的方法,它是B+树的结构,从根到中间节点在到叶子节点,无需遍历全部就可以查到所需的东西 关于索引的创建 一般有俩种方式 ...

  7. 初识 Sql Server存储过程

    开篇语 之前的公司并未使用存储过程来做项目,所以小生对存储过程的调用.使用也是一知半解,刚好这家公司就大量用到了存储过程 这次做的功能,为了保持风格一致,也是需要使用存储过程来实现动态sql和数据分页 ...

  8. OPEN CASCADE编译视频

    为了帮助OPEN CASCADE新手顺利编译OPEN CASCADE源码,特录制了一个视频, 有了这个视频,OPEN CASCADE的编译再也不麻烦啦!

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（41）-组织架构

    系列目录 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当初设计的项目解决方案就是可伸缩可以拆离,可共享的项目解决方案.所以我们同时要添加App.Flow文件夹 ...

  10. 计算机程序的思维逻辑 (53) - 剖析Collections - 算法

    之前几节介绍了各种具体容器类和抽象容器类,上节我们提到,Java中有一个类Collections,提供了很多针对容器接口的通用功能,这些功能都是以静态方法的方式提供的. 都有哪些功能呢?大概可以分为两 ...