Как отключить отображение изображения (холст) - PullRequest
Новая
       33

Как отключить отображение изображения (холст)

2 голосов
/ 09 марта 2020

Я пытаюсь придумать способ, как изображение переходит на экран и выходит из него на несколько секунд каждое. (На экран и остается около 5 секунд, затем переходит и остается скрытым). У меня уже есть код для перехода, моя проблема состоит в том, чтобы заставить его перейти.

Это переход в коде. 

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();
}
<canvas id="canvas">

1 Ответ

0 голосов
/ 09 марта 2020

В вашем updateImageAnimation вы получаете изображение для перехода путем увеличения размера (size++;). Одна из идей для перехода будет просто уменьшить его (size--;).

См. Пример ниже я использую переменную (delta) для управления переходом, и я чередую между положительным и отрицательным, чтобы увеличить или уменьшить размер изображения. 

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);
}
<canvas id="canvas">
...