介绍 GSAP Basic

GSAP是GreenSock Animation Platform的缩写，是一个非常受欢迎的JavaScript动画库。主要优点是它的性能非常好，支持所有主流浏览器，同时也提供了很多有用的API和工具，使动画制作变得更加容易。

在GSAP中，基本上所有的操作都由TweenMax对象完成。TweenMax可用于实现多种动画类型，包括 tweens, timelines, sequences等等。为了更好的介绍GSAP Basic，下面将一步步将介绍如何使用TweenMax来完成一个基本的动画。

使用 TweenMax 实现简单动画

下面展示了使用TweenMax来创建一个简单的动画，将一个元素从透明度为0的状态向透明度为1的状态运动。

// 获取需要运动的元素
const element = document.getElementById("my-element");

// 使用TweenMax执行运动
TweenMax.to(element, 1, { opacity: 1 });

上述代码将动画时间设置为1秒钟，opacity变化从0到1。运动效果是一个元素从透明变为不透明。

使用 TweenMax 实现更复杂的动画

除了上述简单动画，GSAP还提供了丰富的动画类型和参数，在此简单列举一些常用选项。

• ease：定义运动过程中的缓动方式。
• delay：设置动画开始之前的延迟时间。
• yoyo：动画运动完了之后是否平滑的回到起点。
• repeat：设置动画循环的次数。

以下示例展示了如何使用TweenMax实现更复杂的动画，将一个元素沿着圆形路径移动。

const element = document.getElementById("my-element");

// 计算圆形路径
const circlePath = {
  curviness: 1.25,
  values: [
    { x: 100, y: -20 },
    { x: 190, y: 100 },
    { x: 100, y: 220 },
    { x: 10, y: 100 },
    { x: 100, y: -20 }
  ]
};

// 运用TweenMax执行圆形路径动画
TweenMax.to(element, 2, {
  bezier: circlePath,
  ease: Power2.easeInOut,
  delay: 1,
  yoyo: true,
  repeat: -1
});

上述代码创建了一个名为“circlePath”的对象，其中curviness参数定义为1.25，表示沿着曲线的缓动。然后，TweenMax对象采用bezier参数，将圆路径应用于要运动的元素，将延迟1秒后启动动画，将使用Power2.easeInOut缓动函数，将使用yoyo，并且将动画无限循环。

结论

GSAP Basic用以实现各种复杂动画，分分钟让你置身于一个充满生命力的动画世界。它的JavaScript代码易于编写和阅读，提供了丰富的API，功能强大，适用于不同的应用场景。如果你要做动画，那么GSAP Basic是非常好的实践选择。