#tween.js

[bluegreenjackiechan]

I made a virtual gallery website to exhibit my works with Processing language.

If you have interest, please check the link below:

Gallery Audrey

Tap to zoom & Swipe to navigate.

On mobile, enjoy fullscreen mode by Menu > Add to homescreen on browsers.

Many Thanks.

[weekendcarpentry-blog]

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から現状の極座標系の座標を取り出し、 それを直交座標系の座標を計算しなおし、 カメラの座標を更新している。

今回は距離が変わらないケースだったが、 カメラをズームイン/アウトさせた後に初期位置に戻るケースでも、 直線で移動させるより、回転させつつ戻った方が、自然に見える。