GSAP TimeLineLite.to() 将变量传递给第三个参数不起作用。

Question

我正在尝试为 TimeLineLite.to(param1, param2, param3, param4);

中的所有四个参数使用变量

参数 1、2 和 4 可以很好地接受变量，但是，当我将任何类型的变量放入其中时，参数 3 就会爆炸。我需要一些帮助来理解原因！

参数结构如下.to( target:Object, duration:Number, {vars:Object}, position:* );

这是我目前看过的文档，但是，我找不到任何关于将变量传递给参数的信息，也找不到任何关于为什么它不起作用的指示。

1) TimeLineLite intro section

2) .to() documentaion

另外，这是两个模型的代码笔，除了参数3之外，它们都是相同的。您可以点击任何地方重新启动动画。有人可以帮我弄清楚为什么第二个 GreenSock 人不动吗？

代码笔：codepen.io example of my problem.

Answer 1

尝试使用变量引用对象键时，您需要将它们括在方括号中。

考虑以下示例：

var direction = 'left';
var someObject = { left: 200 };
console.log(someObject.direction);
console.log(someObject[direction]);

第一个 console.log 语句将 return undefined 因为 someObject 中不存在名为 direction 的 key。但是，第二个 console.log 调用将 return 200 的值，因为您将 direction 视为一个变量，该变量存储存储在其中的另一个字符串值，即 'left' 和计算后，这将变成 someObject['left']，因此，return 是 200.

的正确结果

简而言之，将 variableDriver.to(...) 行更改为：

variableDriven.to(".variable-driven", 3, { [direction]: distance });

希望这对您有所帮助。

GSAP TimeLineLite.to() 将变量传递给第三个参数不起作用。

GSAP TimeLineLite.to() passing variables to the third parameter does not work.

javascript

variables

parameters

gsap