Tween.jsでアニメーションしてみる

2013年06月17日

こんにちは。受託開発担当のMasaです。

3年ぶりの登場です。久しぶりなのでユルいネタでリハビリします。

今日はJavaScript製のアニメーションライブラリである、Tween.jsを使ってアニメーションを表現します。

まずはアニメーションなしでサンプルを作成します。

Web 上でのサンプルはhtml要素をアニメーションさせてる例が多いので、あえて自分で描画することにします。

<!DOCTYPE html>
<head>
<style>
body {
  margin: 0px;
  padding: 0px;
}
#c {
  background-color: black;
}
</style>
<script>
window.onload = function() {
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  var position = {x: 65, y: 45};

  // 円を描画する
  var draw = function() {
    context.beginPath();
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'rgb(155, 187, 89)';
    context.arc(position.x, position.y, 35, 0, Math.PI*2, false);
    context.fill();
  };

  canvas.onmousedown = function(e) {
    var rect = e.target.getBoundingClientRect();
    // 円の中心点をマウス位置に更新
    position['x'] = e.clientX - rect.left;
    position['y'] = e.clientY - rect.top;
    draw();
  };

  // 初期位置に円を描画
  draw();
};
</script>
</head>
<body>
  <canvas id="c" width="640" height="480">
  未対応
  </canvas>
</body>
</html>

黒い背景部分をクリックすると、円が移動するだけの簡単なサンプルです。

初期表示

クリック

これじゃつまらないので、Tween.jsで移動前と移動後の座標を補間して滑らかなモーションを実現します。

tween.min.js を使うのでインクルードします。

<script src='tween.min.js'></script>

座標を更新する関数を追加して、

  var animate = function() {
    requestAnimationFrame( animate );
    TWEEN.update();
  };

マウスダウンでアニメーションを開始します。

  canvas.onmousedown = function(e) {
    var rect = e.target.getBoundingClientRect();
    var mouseX = e.clientX - rect.left;
    var mouseY = e.clientY - rect.top;
    var target = { x: mouseX, y: mouseY };

    // コンストラクタ引数の position がトゥィーン対象
    var tween = new TWEEN.Tween(position)
       // 1000 ミリ秒かけて position を target にする 
      .to(target, 1000)
       // イージング関数の指定 
      .easing(TWEEN.Easing.Exponential.In)
       // 更新毎に draw を呼び出す
      .onUpdate(draw)
       // アニメーションの開始
      .start();
    
    animate();
  };

完成です。

他にもアニメーションを開始してから実際に実行されるまでの時間を指定する delay や、アニメーションのリピート回数を指定する repeat 等もあります。

    // コンストラクタ引数の position がトゥィーン対象
    var tween = new TWEEN.Tween(position)
       // 1000 ミリ秒かけて position を target にする 
      .to(target, 1000)
      // 500 ミリ秒後に実行
      .delay(500)
      // 同じ動作を 5 回繰り返す
      .repeat(5)
       // イージング関数の指定 
      .easing(TWEEN.Easing.Exponential.In)
       // 更新毎に draw を呼び出す
      .onUpdate(draw)
       // アニメーションの開始
      .start();

以上で終わりです。
もし次回があるのならば、ColorTween や TextTween を紹介します。

執筆担当：Masa