canvasアニメ

とあるサイトを見ていてちょっと気になるアニメーションをしたサイトがあったので、参考にしながら作ってみました。

canvasでオブジェクトをどうやってアニメーションさせるかは、TweenMaxやcerateJsなどいろいろありますが、お手軽にアニーションの設定ができるVelocity.jsでできないか試したところアニメーションができました。

やっていることはパラパラアニメと同じで、フレーム毎に描画したら消去を繰り返し、パスの座標をアニメーションさせています。

$('#canvas').velocity({
  tween: H //Hはcanvasの高さ
},
{
  easing: "easeOutCubic",
  progress: function(elements, complete, remaining, start, tweenValue) {
  cont.clearRect(0, 0, W, H);
  cont.beginPath();
  cont.moveTo(0, 0);
  cont.lineTo(W, 0);
  cont.lineTo(W, tweenValue);
  cont.quadraticCurveTo(W / 2, tweenValue*complete, 0, tweenValue); //WはWindowの横幅
  cont.closePath();
  cont.fill();
},
  complete: function(elements) {
    $('#box-canvas').css("background-color",'rgb(0, 102, 181)');
  }
});