SVG-Morpheus 是一个基于 JavaScript 的动画库，可以用于创建 SVG 动画效果。它可以帮助前端开发者轻松地创建各种炫酷的动画效果，例如形状转换、颜色渐变、旋转等。
安装 SVG-Morpheus
使用 npm 安装 SVG-Morpheus：
npm install svg-morpheus
引入 SVG-Morpheus
在 HTML 文件中引入 SVG-Morpheus 的 JavaScript 文件：
<script src="node_modules/svg-morpheus/shape.js"></script> <script src="node_modules/svg-morpheus/morpheus.js"></script>
使用 SVG-Morpheus
1. 创建 SVG 元素
首先，在 HTML 文件中创建 SVG 标签，并添加一些形状元素：
<svg width="400" height="400"> <rect id="rect1" x="50" y="50" width="100" height="100" fill="#ff0000"></rect> <rect id="rect2" x="250" y="250" width="100" height="100" fill="#00ff00"></rect> </svg>
2. 初始化 SVG-Morpheus
在 JavaScript 文件中初始化 SVG-Morpheus：
var morpheus = new Morpheus('#rect1', {
rotation: 'none'
});这里我们定义了一个 morpheus 对象，它将绑定到我们希望变换的 SVG 形状元素上。
3. 定义变换
使用 to 方法定义形状变换：
morpheus.to('#rect2', {
duration: 1000,
easing: 'linear',
rotation: 'none'
});这里我们将 #rect1 元素转换成 #rect2 元素，变化时间为 1000 毫秒，变化效果为线性变化（即匀速变化），并且未旋转。
4. 启动动画
使用 play 方法启动动画：
morpheus.play();
这里调用了 play 方法，开始播放动画。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------------
-------
------
---- ----------- -------------
----- ---------- ------ ------ ----------- ------------ ----------------------
----- ---------- ------- ------- ----------- ------------ ----------------------
------
------- --------------------------------------------------
------- -----------------------------------------------------
--------
--- -------- - --- ------------------ -
--------- ------
---
--------------------- -
--------- -----
------- ---------
--------- ------
---
----------------
---------
-------
-------总结
SVG-Morpheus 是一个非常有用的动画库，可以帮助开发者快速创建各种炫酷的动画效果。使用该库需要了解 SVG 基础知识，并且在编写代码时要注意变换效果的设计和实现。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34134