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

动画思路：

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. mysql 5.7中的用户权限分配相关解读！

    这篇文章主要介绍了MySQL中基本的用户和权限管理方法,包括各个权限所能操作的事务以及操作权限的一些常用命令语句,是MySQL入门学习中的基础知识,需要的朋友可以参考下 一.简介 各大帖子及文章都会讲 ...

  2. 使用Jenkins配置Git+Maven的自动化构建

    Jenkins是一个开源的持续集成工具,应用Jenkins搭建持续集成环境,可以进行自动构建.自动编译和部署,非常方便. 在服务器比较少的情况下,Jenkins的优势并不明显,但是随着项目发展,服务器 ...

  3. SQL Server2014 SP2关键特性

    SQL Server2014 SP2关键特性 转载自:https://blogs.msdn.microsoft.com/sqlreleaseservices/sql-2014-service-pack ...

  4. .NET跨平台：在CentOS上编译dnx并运行ASP.NET 5示例程序

    在之前的博文中我们在 Ubuntu 上成功编译出了 dnx ,并且用它成功运行了 ASP.NET 5 示例程序.在这篇博文中我们将 Ubuntu 换成 CentOS. 目前 dnx 的编译需要用到 m ...

  5. Dubbo学习小记

    前言 周一入职的新公司,到了公司第一件事自然是要熟悉新公司使用的各种技术,搭建本地的环境. 熟悉新公司技术的过程中,首先就是Maven,这个前面已经写过文章了,然后就是Dubbo----公司的服务都是 ...

  6. 关于apue.3e中apue.h的使用

    关于apue.3e中apue.h的使用 近来要学一遍APUE第三版,并于此开博做为记录. 先下载源文件: # url: http://http//www.apuebook.com/code3e.htm ...

  7. Redis学习手册(目录)

    为什么自己当初要选择Redis作为数据存储解决方案中的一员呢?现在能想到的原因主要有三.其一,Redis不仅性能高效,而且完全免费.其二,是基于C/C++开发的服务器,这里应该有一定的感情因素吧.最后 ...

  8. 精通Perl（第2版）

    精通Perl(第2版)(通往Perl大师之路必读经典书籍,体现了一种编程思维,能够帮你解决很多实际的问题) [美]brian d foy(布瑞恩·D·福瓦)著   王兴宇 刘宸宇 译 ISBN 978 ...

  9. GitHub实战系列~3.提交github的时候过滤某些文件 2015-12-10

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  10. Vertica DBD 分析优化设计

    DBD = Database Designer,是Vertica数据库优化中最主要的原生工具. 首先运行admintools工具,按下面步骤依次执行: 1.选择"6 Configuratio ...