重复的 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 添加值。 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 更快地获得帮助。