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函数标识符失败

1 个答案: