动画曲线

动画曲线是动画设计中最重要的部分之一，它决定了动画的流畅性和美感。

下面有两个示例，第一个没有设置动画曲线，第二个单独设置了动画曲线，可以对比一下效果。

gsap.to(".green", { rotation: 360, duration: 2, ease: "none" });

gsap.to(".purple", { rotation: 360, duration: 2, ease: "bounce.out" });

See the Pen by GreenSock on CodePen.

以下是一些常用的缓动函数:

• Linear.easeNone: 匀速运动，没有加速度或减速度。
• Power1.easeIn: 缓慢加速，然后突然停止。
• Power1.easeOut: 突然开始，然后缓慢减速。
• Power1.easeInOut: 缓慢加速，然后缓慢减速。
• Power2.easeIn: 缓慢加速，然后更快地加速，最后突然停止。
• Power2.easeOut: 突然开始，然后缓慢减速，最后更慢地减速。
• Power2.easeInOut: 缓慢加速，然后更快地加速，然后缓慢减速。
• Power3.easeIn: 缓慢加速，然后更快地加速，然后更快地加速，最后突然停止。
• Power3.easeOut: 突然开始，然后缓慢减速，然后更慢地减速，最后更慢地减速。
• Power3.easeInOut: 缓慢加速，然后更快地加速，然后更快地加速，然后缓慢减速。
• Back.easeIn: 缓慢加速，然后超过目标值，最后回弹到目标值。
• Back.easeOut: 突然开始，然后超过目标值，最后缓慢减速。
• Back.easeInOut: 缓慢加速，然后超过目标值，然后缓慢减速。
• Elastic.easeIn: 缓慢加速，然后超过目标值，然后反弹几次，最后停止。

GSAP 还提供了其他内置的动画曲线，也可以通过自定义函数来创建自己的动画曲线。

具体的动画曲线参考 GSAP Easing 官方文档。