2017-08-15 8 views
0

私はCameraクラスに、同時にアニメーション化する2つの属性があります。 distance属性(数値)とrotation(両方ともx, y, zの要素)属性をアニメーション化したいと思います。GSAP:ネストされた属性を同時にトゥイーンする方法

試み1:

TweenLite.to(this.camera, 1.0, {distance: 30, rotation.y: 10, rotation.x: 50}); 

試み2:私は、次のことをしようとしてきたことがvars内部のドット表記を使用できませんので

TweenLite.to(this.camera, 1.0, {distance: 30, rotation:{y: 10, x: 50}}); 

試み1が失敗パラメータ。試行2は黙って失敗し、何もアニメーションが得られません(TweenLite v:1.20.2)。距離と回転の両方のアニメーションを同時にトリガする構文がありますか?

TweenLite.to(this.cam, 1.0, {distance: 30}); 
TweenLite.to(this.cam.rotation, 1.0, {y:10, x: 50}); 
TweenLite.to(this.cam.position, 1.0, {x:0.5, z: 3}); 

答えて

0

私はあなたが私はそれに打撃を与えたAttrPlugin

TweenLite.to(this.camera, 1, {attr:{distance: 30, rotation:{y: 10, x: 50}}}); 
+0

を使用する必要があると思いますが、:働いている唯一の方法は、私がアニメーション化するいくつかの属性よりも多くを持っていたら、非常に迅速にVERBOSEます動いていない。 AttrPluginは ''などのHTML DOM要素の属性を変更するだけで、入れ子になったJavaScriptオブジェクトにはアクセスできないようです。 – Marquizzo

+0

わかりました。申し訳ありませんが、私はcodepen/jsfiddleを見ることなくそれを得ることはできませんでした。これは2つの行で行う必要があるように見えます.1つはthis.camをアニメーション化し、もう1つはthis.cam.rotationをアニメーション化します(あなたの冗長な例によると)。 GSAPフォーラムの関連する質問はこちら:https://greensock.com/forums/topic/7888-tween-the-properties-of-an-object-of-an-object-in-an-array/ –

関連する問題