How to Undisplay an Image (CANVAS)

Question

I'm trying to come up with a way where an image transitions in and out of the screen for a few seconds each. (Into the screen and stays for about 5 seconds then transitions out and stays hidden). I already have code for transitioning in, my problem is getting it to transition out.

This is the transition in code.

let canvas = null;
let ctx = null;

window.onload = onAllAssetsLoaded;

function onAllAssetsLoaded() {
  // stopAndHide the webpage loading message
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;

  /* Step 1 of 3 */
  /* Start the animations */
  setTimeout(startImageAnimation, 2000);

  renderCanvas();
}


/* Step 2 of 3 */
/* Each animation needs its own code */
/******************************************************************************/
/* These three are ALWAYS needed */
let imageAnimationInterval = null;
const IMAGE_FRAMERATE = 5; // change to suit the animation frameRate in milliseconds. Smaller numbers give a faster animation */
let imageAnimationIsDisplayed = false;

/* These variables depend on the animation */
let image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";

let imageX = 0;
let imageY = 0;
let size = 0;

function startImageAnimation() {
  imageAnimationIsDisplayed = true;
  imageAnimationInterval = setInterval(updateImageAnimation, IMAGE_FRAMERATE);
}


function stopImageAnimation() {
  imageAnimationIsDisplayed = true;
  clearInterval(imageAnimationInterval);
  imageAnimationInterval = null; // set to null when not running           
}


function stopAndHideImageAnimation() {
  stopImageAnimation();
  imageAnimationIsDisplayed = false;
}


function updateImageAnimation() {
  size++;

  if (size === canvas.width) {
    stopImageAnimation();
  }
}


function renderImageAnimation() {
  if (imageAnimationIsDisplayed) {
    ctx.drawImage(image, imageX, imageY, size, size);
  }
}
/******************************************************************************/



/******************************************************************************/


function renderCanvas() {
  requestAnimationFrame(renderCanvas);
  ctx.clearRect(0, 0, canvas.width, canvas.height);


  /* Step 3 of 3 */
  /* Drawn the animations */
  renderImageAnimation();
}

user_7599833 · Answer

In your updateImageAnimation you got the image to transition in by increasing the size (size++;) one idea to transition out will be to just decrease it (size--;).

See the example below I'm using a variable (delta) to control the transition, and I alternate between positive and negative to increase or decrease the size of the image.

let image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
let size = 20;
let delta = 2;

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

setInterval(draw, 50);

function draw() {  
  if (size > canvas.height || size < 10) {
    delta *= -1
  }
  size += delta;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0, size, size);
}

How to Undisplay an Image (CANVAS)

1 Answers