javascript - 重复的 gsap 动画代码和服务器加载时间

Question

我正在为一些具有很多常见动画的元素制作动画，所以我认为它非常重复并且使用了额外的代码

TweenLite.from('.port', 5, {
     opacity: 0,
     rotation: 180,
     marginLeft: '50vw',
     ease: Back.easeOut.config(1.7)
});
TweenLite.from('.folio', 5, {
     opacity: 0,
     rotation: 180,
     marginRight: '-50vw',
     ease: Back.easeOut.config(1.7)
});

上面的代码唯一的区别是边距，所以最好让我的代码更干净和轻便来做这样的事情:

TweenLite.from('.port, .folio', 5, {
     opacity: 0,
     rotation: 180,
     marginLeft: '50vw',
     ease: Back.easeOut.config(1.7)
});
TweenLite.from('.folio', 5, {
     marginRight: '-50vw'
});

或者在这种情况下你们怎么看，我想让我的代码更轻巧、更干净，因为它们除了边距外都有所有共同点

Answer 1

当然，假设 this demo 中的行为是可能的，就像您所做的那样是你想要的。

否则，您可以使用一个通用的 vars 对象并将其传递到您的补间中，使用 Object.assign增加值(value)。 Demo of that here .

var vars = {
  opacity: 0,
  rotation: 180,
  marginLeft: '50vw',
  ease: Back.easeOut.config(1.7)
};

TweenLite.from('.port', 5, vars);

TweenLite.from('.folio', 5, Object.assign({
  marginRight: '-50vw'
}, vars));

下一版本的 GSAP(尚未发布)将使您在这里尝试做的事情变得更加容易!

附言您更有可能在 the GreenSock forums 上更快地获得帮助对于这些类型的问题。