在另一个函数中将字符串作为参数传递时，GSAP js 函数标识符失败

Question

我一直在使用 GSAP 教程（下面的链接），并希望以此为基础制作一个功能

tl.from(img, 1, {y: -20, autoAlpha:0, ease: Bounce.easeOut})

所以我创建了这个

    // a = selector, b = duration, c = axis, d = offset, e = type of animation, f= easeOut/In

    // Problem occurs when passing c as either 'x'/'y' string

        function test(a,b,c,d,e,f){
    var tl=new TimelineLite;
    var img = $('img');
    var result = tl.from(a, b, c:d, ease:e+'.'+f});
return result;

    }

test('img',2,"y",-370,"Bounce","easeOut");

一旦运行，它就不起作用并且控制台中出现 0 个错误，如此处所示 http://weconnect.ro/stack/

如果在函数中我将 c 标识符修改为 y，它会像魔术一样运行： https://weconnect.ro/stack/working.html

我对 JS 还很陌生，我猜问题可能是 y 并不是一个真正的字符串（而且很确定这不是从函数标识符传递字符串的最佳方法）。

我也不知道我会如何 console.log(this) 因为 console.log(test('img',2,"y",-370,"Bounce","easeOut")); 输出 TL 函数的解构，我假设它是它的对象，这可能是构建它的方法。

如有任何澄清，将不胜感激，谢谢！

Answer 1

这是一个有点复杂的问题，需要对 JavaScript 语言中一些更令人困惑的部分进行一些解释。我会试着把它分解一下。

函数tl.from(img, 1, {y: -20, autoAlpha:0, ease: Bounce.easeOut}) 将一个对象（{} 中的所有内容）作为第三个参数。在您编写的格式中，该对象是一个匿名对象，它是在方法调用中即时创建的。但是，您可以显式创建对象，并将该对象作为参数传递。

即您可以将该函数称为 tl.from(img, 1, objectWithVariousProperties)

这会导致下一个问题，即您正试图将一个字符串传递给代表特定属性名称的函数。为了能够以这种方式访问属性，您可以使用 JavaScript Object Bracket Notation，而不是 Dot Notation。看起来像 objectWithVariousProperties[someVariableNamingAProperty].

因此，将这些放在一起，您将接收参数、创建对象并准备其属性，然后将对象传递给函数。类似于以下内容：

请注意，我更改了变量名称以使代码尽可能清晰，并展示了 3 种不同的方法来为对象赋值属性。

function test(selector, duration, axis, offset, animation, fadeDirection){

  var tl=new TimelineLite;
  var img = $(selector);

  var propertyObject = {
    autoAlpha: 0   // inline property assignment
  };  
  propertyObject[axis] = offset;  //bracket notation
  propertyObject.ease = animation + '.' + fadeDirection;  //dot notation

  var result = tl.from(img, duration, propertyObject);
  return result;
}

在另一个函数中将字符串作为参数传递时，GSAP js 函数标识符失败

GSAP js function identifier fails when passing string as parameter in another function

javascript

gsap