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});
我只是给它一个镜头,但它不工作。它看起来像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/ –