Tween.jsでアニメーションしてみる
masakiこんにちは。受託開発担当の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 を紹介します。
