《JavaScript》画像を抽出して、波打たせるようなアニメーションをcanvasに描く。

drawImage() で、抽出と描画座標をずらして呼び出しを繰り返すと、波打つようなアニメーションが実現できます。

• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)－Canvasリファレンス

ずっと見ていられる感じと、素材となる画像によっていろんな表情になるのが素敵かな、と思います。

demo

マウスオ−バーすると画像が現れます。

• canvas image wave effect

Html

<canvas id="canvas" data-src=test.jpg" width="300" height="300"></canvas>

JavaScript

/**
 * 画像を抽出して、波打たせるようなアニメーション
 * マウスオーバーすると画像が現れる
 */
const waveAnim = () => {

  let canvas  = document.getElementById('canvas'),
      ctx     = canvas.getContext('2d'),
      canvasW = canvas.width,
      canvasH = canvas.height,
      img     = new Image();

  img.src = canvas.getAttribute('data-src');

  /**
   * 停止させるためのid
   */
  let animId;

  /**
   * 読み込み位置を管理する
   */
  let x = 1,
      r = -1;

  /**
   * 画像の横1px縦いっぱいの色情報で塗りつぶす
   */
  const wave = () => {

    /**
     * 反転させる
     */
    x == canvasW ? r = -1 : 0 == x && (r = 1);

    ctx.drawImage(img, x, 0, 1, canvasH, -x, 0, canvasW + x, canvasH);
    x += r;

    /**
     * setInterval で速さを決めたり可変させてもいい
     */
    animId = requestAnimationFrame(wave);

  };
  img.onload = wave;


  /**
   * 波打ちながら元画像が現れる
   */
  const show = () => {

    ctx.drawImage(img, x, 0, 1, canvasH, x, 0, canvasW, canvasH);
    x < canvasW ? (x++) : cancelAnimationFrame(animId);

    animId = requestAnimationFrame(show);

  };


  /**
   * アニメーションのリセット
   */
  const reset = () => {

    cancelAnimationFrame(animId);
    ctx.clearRect(0, 0, canvasW, canvasH);
    x = 1;
    r = -1;

  };

  /**
   * canvas に触れると画像が現れる
   */
  canvas.addEventListener('mouseover', () => {

    reset();
    show();

  });

};

waveAnim();

おわります。