jQuery Easing Plugin の関数を使ってcanvasアニメーションをする

canvasでアニメーション書くとき、イージングかけたりしようと思うと自分で1から実装するの結構しんどい。 jQuery.easing Pluginに含まれる関数を使い回すと瞬殺出来て楽しい。

var ctx;// canvasの内容を適宜
var width,height;// canvasの縦と横

var draw = function(){
    var time = (getMilliseconds() - startTime);

    ctx.fillStyle="white";
    ctx.fillRect(0, 0, width, height);

    var loop_duration = 3000.0;
    if( time > loop_duration ){
      time = loop_duration - 1;
    }
    var test_t = time % loop_duration;

    var radius = 100 * jQuery.easing.easeInOutElastic(test_t/loop_duration, test_t, 0, 1, loop_duration, 2.0);
    if(radius > 0){
      ctx.fillStyle="red";
      ctx.beginPath();
      ctx.arc(400, 300, radius, 0, 2*Math.PI, true);
      ctx.fill();
    }

    requestAnimationFrame(draw);
  };

  requestAnimationFrame(draw);

簡単に共有まで。細かい所はご自分で適宜手を入れて上手く利用して頂ければ幸いです！