javascript - 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 语句将返回 undefined 因为 direction 没有这样的 key存在于 someObject 中。但是，第二个 console.log 调用将返回 200 的值，因为您将 direction 视为一个变量，该变量存储其中存储的另一个字符串值即 'left'，在计算之后，这将变成 someObject['left']，因此，返回正确的结果 200。

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

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

希望这对您有所帮助。