JS realizes animation effect by cycling multiple pictures

Time:2021-4-18

This example for you to share JS through the cycle of multiple pictures to achieve animation display of the specific code, for your reference, the specific content is as follows

Take small fish wagging their tails and blinking their eyes

Animation ideas:

1. Put the image resources in the array

2. Set the interval time by timer

3. Get the corresponding picture through the counter

Step one:Basic framework, fish body


<body>
 <canvas 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);

 //Time frame interval
 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);
  };
})();

Step 2:Wag one’s tail

1. There are 8 picture resources, from tail0.png to tail7.png

2. The tail moves at a constant speed with a fixed interval

Var btailtimer, // timer
 Btailcount, // counter
 Babytail = []; // image array

function init() { 
//Tail initialization
 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; // initialize counter
 }
 ctx1.drawImage( babyTail[bTailCount], -babyTail[bTailCount].width * 0.5, -babyTail[bTailCount].height * 0.5);
}

function gameloop() {
 ctx1.clearRect(0, 0, canWidth, canHeight); 

 bodyDraw();
 tailDraw();
 }

Step 3:Blink your eyes

1. There are 2 picture resources, from eye0.png to eye7.png

2. The opening time of eyes is irregular, and the closing time is fixed

var bEyeTimer,
 bEyeCount,
 Beeyeinterval, // time interval variable
 babyEye = [];

function init() { 
//Eye initialization
 bEyeTimer = 0;
 bEyeCount = 0;
 Beeyeinterval = 1000; // interval time
 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) 
  {
   //The time of keeping eyes open is random
   bEyeInterval = Math.random() * 1500 + 2000; //[2000,3500)
  } else 
  {
   //The time of keeping eyes closed is 100 ms
   bEyeInterval = 100;
  }
 }
}

function gameloop() {
eyeDraw();
 }

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.