利用GSAP的力量：轻松实现SVG动画

前端

2023-11-23 06:33:33

当我们踏入SVG动画的精彩世界时，我们面临着一个琳琅满目的框架选择。今天，我们将目光投向GSAP，一个以其学习曲线低和性能优异而闻名的框架。

GSAP的魅力所在

GSAP，全称GreenSock Animation Platform，之所以广受青睐，源于它以下两大优势：

学习成本低： GSAP的API简洁易懂，入门门槛低，即使是新手也能迅速掌握其精髓。
性能出色： GSAP的动画效果丝般顺滑，得益于其对GPU的充分利用，即使在复杂动画场景中也能保持高帧率。

打造令人惊叹的SVG动画

让我们亲自动手，探索使用GSAP创建SVG动画的奥秘。我们将创建三个独特的动画效果：

缩放和旋转： 让一个圆形元素随着鼠标移动而缩放和旋转。
路径动画： 沿着预定义路径移动一个矩形元素。
逐帧动画： 展示一个序列帧动画，呈现一个人物的行走动作。

实战教程

1. 设置场景

首先，创建一个HTML文件，引入GSAP库和你的SVG图像。

<html>
<head>
  <script src="gsap.min.js"></script>
</head>
<body>
  <svg id="my-svg">
    <circle cx="100" cy="100" r="50" fill="red" />
  </svg>
</body>
</html>

2. 缩放和旋转

使用GSAP的TweenMax库，我们可以轻松实现缩放和旋转效果。

// 获取圆形元素
const circle = document.querySelector("#my-svg circle");

// 添加监听器，在鼠标移动时执行动画
window.addEventListener("mousemove", (e) => {
  // 缩放圆形元素
  TweenMax.to(circle, 1, { scale: e.clientX / window.innerWidth });

  // 旋转圆形元素
  TweenMax.to(circle, 1, { rotation: e.clientY / window.innerHeight * 360 });
});

3. 路径动画

要实现路径动画，我们需要先定义路径，然后使用TweenMax的沿路径运动功能。

// 创建一个路径元素
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M 100 100 L 200 200 L 300 100");

// 获取矩形元素
const rect = document.querySelector("#my-svg rect");

// 添加沿路径运动动画
TweenMax.to(rect, 1, { motionPath: { path: path, align: path, alignOrigin: [0.5, 0.5] } });

4. 逐帧动画

逐帧动画需要我们手动创建每一帧的图像。在这里，我们展示一个人物行走的动画。

// 创建帧容器
const frames = document.querySelectorAll("#my-svg .frame");

// 逐帧播放动画
TweenMax.staggerTo(frames, 0.5, { opacity: 1, ease: "Power1.easeIn" }, 0.1);