重复的 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 to add values. 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（尚未发布）将使您在这里尝试做的事情变得更加容易！

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

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

Repetitive gsap animation code and server load time

javascript

performance

animation

load

gsap