脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js循环多张图片

js通过循环多张图片实现动画效果

 更新时间：2019年12月19日 15:03:58   作者：regina.nian  
这篇文章主要为大家详细介绍了js通过循环多张图片实现动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js通过循环多张图片实现动画展示的具体代码，供大家参考，具体内容如下

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

动画思路：

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; 8  bTailCount = 0; 9  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生态系统加速Tailwind CSS工作原理探究

    JS生态系统加速Tailwind CSS工作原理探究

    这篇文章主要为大家介绍了JS 生态系统加速Tailwind CSS使用及工作原理探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • Echarts柱状图修改柱子颜色渐变及柱子圆角效果实例

    Echarts柱状图修改柱子颜色渐变及柱子圆角效果实例

    在ECharts中,可以通过修改series.itemStyle.normal属性来定制柱状图的柱子样式,包括圆角和背景色渐变,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • TypeScript开发小状况记录之选且只选一个

    TypeScript开发小状况记录之选且只选一个

    在开发中需要定义一个对象的类型,此类型必须包含某n个字段中的其中一种,这篇文章主要给大家介绍了关于TypeScript开发小状况记录之选且只选一个的相关资料,需要的朋友可以参考下
    2022-10-10
  • js实现模拟购物商城案例

    js实现模拟购物商城案例

    这篇文章主要为大家详细介绍了js实现模拟购物商城案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • jstree中的checkbox默认选中和隐藏示例代码

    jstree中的checkbox默认选中和隐藏示例代码

    这篇文章主要介绍了jstree的checkbox默认选中和隐藏,需要的朋友可以参考下
    2019-12-12
  • js实现固定宽高滑动轮播图效果

    js实现固定宽高滑动轮播图效果

    本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 详解JavaScript中的链式调用

    详解JavaScript中的链式调用

    这篇文章主要介绍了JavaScript中的链式调用的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-11-11
  • bootstrap confirmation按钮提示组件使用详解

    bootstrap confirmation按钮提示组件使用详解

    这篇文章主要为大家详细介绍了bootstrap confirmation按钮提示组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 老生常谈JavaScript 数组方法

    老生常谈JavaScript 数组方法

    本文详细介绍了JavaScript数组方法的分类和具体用法,涵盖了数组的添加/删除、查找/访问、遍历、排序/反转、转换以及一些其他实用方法,每种方法都提供了简要的解释和示例代码,帮助读者更好地理解和应用这些方法,感兴趣的朋友一起看看吧
    2025-03-03
  • 一文总结JavaScript中常见的设计模式

    一文总结JavaScript中常见的设计模式

    在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。，本文将总结了JavaScript中常见的十五种设计模式，感兴趣的朋友可以参考下
    2023-05-05

最新评论