SVG 是一种用于创建矢量图形的 XML 格式，在前端领域中得到了广泛应用。GreenSock 是一个高性能的 JavaScript 动画库，提供了许多动画效果和 API。结合使用这两个工具可以创造出令人惊艳的动画效果。
本文将介绍如何使用 GreenSock 实现 SVG 形状变化动画。我们将从基础开始逐步深入，带你掌握 GreenSock 动画的核心思想和实践技巧，并提供示例代码以供学习和参考。
准备工作
在开始之前，我们需要准备以下工具和资源：
首先，我们需要在 HTML 文件中引入 GreenSock 库和 SVG 图像。为了更好地组织代码，我们可以将它们放在不同的文件中并使用模块化方式加载。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- -----------
------- ------------- -----------------------
-------
------
---- -------------- ---------- - --- -----
----- ----------- --------- -------- ------- -------- ------- -------- ------- -------- ----------------
----- ----------- --------- ------- ------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -------- -----------------
------
-------
-------创建动画
我们将使用 GreenSock 的 TweenMax 类实现形状变化动画。首先，我们需要获取 SVG 中的两个路径元素，并创建 TweenMax 实例。
-- -------------------- ---- -------
------ - -------- - ---- -------
----- ------ - ----------------------------------
----- ------ - ----------------------------------
----- ----- - --- ---------------- -- -
--------- -------
------- ---
----- ----
---在上面的代码中，我们创建了一个名为 tween 的 TweenMax 实例，并将其绑定到 shape1 元素上。morphSVG 属性指定了形状变化的目标路径，即 shape2 元素。repeat 和 yoyo 属性用来设置动画重复和反向播放。
我们可以在浏览器中运行这段代码，看到形状变化的动画效果。
优化动画性能
通常情况下，SVG 动画可能会因为渲染频率过高而导致卡顿甚至崩溃。为了解决这个问题，我们可以使用 GreenSock 提供的 DrawSVGPlugin 插件来实现更高效的绘制方式。
-- -------------------- ---- -------
------ - --------- ------------- - ---- -------
----- ------ - ----------------------------------
----- ------ - ----------------------------------
----- ----- - --- ---------------- -- -
-------- -----
- ------- --------------------------------------------------- -------- --- ------ --- --------
--------------------------------------------------------------