GSAP：如何同时补间嵌套属性

我有一个Camera类，它有两个我想同时动画的属性。我想动画它的distance属性（它是一个数字）和rotation属性（它具有x, y, z元素）。我已经尝试以下操作：GSAP：如何同时补间嵌套属性

尝试1：

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

尝试2：

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

尝试1失败，因为它不允许vars内点符号参数。尝试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});

来源

2017-08-15 Marquizzo

我认为你需要使用AttrPlugin

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

来源

2017-08-16 16:18:53

我只是给它一个镜头，但它不工作。它看起来像AttrPlugin只是修改HTML DOM元素中的属性，比如'

哦，我明白了。对不起，我没有看到codepen/jsfiddle就没有明白。它看起来好像你可能必须在两行中完成 - 一个是为this.cam创建动画，另一个是为this.cam.rotation创建动画（按照你的详细示例）。在这里看到GSAP论坛相关的问题：https://greensock.com/forums/topic/7888-tween-the-properties-of-an-object-of-an-object-in-an-array/ –

GSAP：如何同时补间嵌套属性

回答

相关问题