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

动画思路：

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. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  2. 项目持续集成环境（jenkins + SVN + maven + tomcat）

    整体流程 每次SVN上代码有变动,触发自动构建动作,并部署到服务器的tomcat上,具体流程: 1.SVN上提交代码修改 2.maven执行Goals 3.将web工程打成war包 4.关闭服务器的t ...

  3. x01.os.22: ubuntu 常用设置

    新组装了个 64 位电脑,i5 CPU,进入 ubuntu 后,又是一通搜索设置,整理如下,以备后用. 安装 .dep 包 sudo dpkg -i [filename.dep] 在 ubuntu 中 ...

  4. 马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)

    马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)目录详情:18_02_ssl协议.openssl及创建私有CA18_03_OpenSSH服务及其相关应用09_01_磁盘及文 ...

  5. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  6. 猫哥网络编程系列：详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

  7. iOS开发系列--音频播放、录音、视频播放、拍照、视频录制

    --iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...

  8. 再次学习 java 类的编译

    做JAVA开发的都知道myeclipse, 我们在myeclipse中新建一个类,然后保存, 如何正常的话,那么在项目指定的目录(也就是项目的output目录)就会生成同名的class文件, 可是,我 ...

  9. CocoaPods 1.1.0上传遇到swift问题

    更新时间: 2016-11-25 1.出现如下信息: Conn keep-alive Updating spec repo `master` - Data URL: https://raw.githu ...

  10. ★Kali信息收集~2.Whois ：域名信息

     Web地址:http://whois.chinaz.com/ | http://www.whois.net/ 软件参数:whois  常用命令:whois 域名 (重点看whois server和R ...