Tween.jsでオブジェクトを移動させる
Tween.jsの使い方。 まずはサンプルをそのまま。
var tween = new TWEEN.Tween( { x: 50, y: 0 } ) .to( { x: 400 }, 2000 ) .easing( TWEEN.Easing.Elastic.InOut ) .onUpdate( function () { output.innerHTML = 'x == ' + Math.round( this.x ); var transform = 'translateX(' + this.x + 'px)'; output.style.webkitTransform = transform; output.style.transform = transform; } ) .start();
Tweenのコンストラクタで、操作したいプロパティを持ったオブジェクトを渡して、 toメソッドで、操作したいプロパティの名前とゴールの値、 あとアニメーションにかかる時間を指定して、 easingメソッドで、アニメーションのタイプを指定して、 onUpdateメソッドで、値が更新されるたびに呼ばれるコールバック関数を指定して、 startで実行。
で、実際に使ってみた。 やってみたのは、Three.jsのカメラをTweenを使って、 ボタンクリックで初期位置に移動させること。
こんな状況です。
最初は直接カメラの座標を操作してみた。その時のコードはコレ。 # コードを簡単にする為に2次元にした。カメラ初期位置は(20,0)
var tween = new TWEEN.Tween( camera.position ) .to( { x: 20, y:0 }, 500 ) .easing( TWEEN.Easing.Linear.None ) .start();
コレだと、アニメーションの最中に物体に一度ズームしてしまう。
そりゃそうだ。
円周上の一点から別の点に移動するとき、 その点を結んだ直線上を移動しているので、 物体とカメラの間の距離が、一度近づいているから。
なので、ちょっと工夫。 # 工夫、つーか、当然の処理なんですが。
カメラと物体の間を一定に保てば、ズームせずに回転だけするはず。 実際には、カメラのpositionプロパティ（直交座標系）を直接操作するのはやめて、 いったん極座標系に直してアニメーションを実行する。 こうすることで、物体とカメラの距離は一定に保てる。
実際やってみらうまくいった。 コードはこんな感じ。
var rectp=camera.position; var polarp = { r:Math.sqrt(rectp.x*rectp.x+rectp.y*rectp.y), theta:rectp.x!=0?Math.atan(rectp.y/rectp.x):(rectp.y>0?Math.PI/2:-Math.PI/2) }; var tween = new TWEEN.Tween( polarp ) .to( { r: 20, theta:0 }, 500 ) .easing( TWEEN.Easing.Linear.None ) .onUpdate(function(){ camera.position.x = this.r*Math.cos(this.theta); camera.position.y = this.r*Math.sin(this.theta); }) .start();
onUpdateの中では、 thisがアニメーションの対象オブジェクト（polarp）になっているので、 thisから現状の極座標系の座標を取り出し、 それを直交座標系の座標を計算しなおし、 カメラの座標を更新している。
今回は距離が変わらないケースだったが、 カメラをズームイン/アウトさせた後に初期位置に戻るケースでも、 直線で移動させるより、回転させつつ戻った方が、自然に見える。
