形状变形的多样工具

毫无疑问，我相信，在网络上有很多不同的方法可以做同样的事情。形状变形作为网络上的一种技术，也不例外。有一些原生技术，一些利用这些技术的库，以及一些完全独立工作的库。让我们看看一些选项（带演示）并权衡其优缺点。

SMIL

最初的形状变形原生技术是 SMIL。我们在 CSS-Tricks 上既有 关于 SMIL 的指南，也有 一篇讨论其替代方案的文章，因为它在微软浏览器中无法工作，并且 Blink 曾在一段时间内威胁要取消它。

我不建议使用 SMIL 进行重要的工作，但它是原始的形状变形技术。

查看 CodePen 上 Noah Blon (@noahblon) 的笔 Sitepoint 挑战赛 #1：SVG 和 SMIL。

我们的文章 SVG 形状变形的工作原理 详细介绍了 SMIL 形状变形，上面的演示来自 Noah Blon 的 SVG 动画入门：SMIL。

要了解必须具有相同点数的要求，您可能喜欢玩 Shape Shifter

MorphSVG（Greensock GSAP 插件）

继续讨论可能最强大的选项，Greensock 的 MorphSVG 是一款强大的工具。请记住

MorphSVGPlugin 是 Club GreenSock 成员（“Shockingly Green” 和 “Business Green” 等级）的额外插件。这是我们表达对那些推动 GreenSock 创新的人的感谢的方式。

值得拥有。仅 MorphSVG 就非常出色。与几乎所有其他形状变形方法不同，它可以在任意点数的形状之间进行过渡。它以高性能的方式，以安全且跨浏览器的形式执行此操作，并为您提供更多对动画执行方式的细粒度控制。

查看此处发生的复杂变形

查看 CodePen 上 Sullivan Nolan (@nolakat) 的笔 变形 SVG 滑块 - 20 世纪女性。

如果您想使用 MorphSVG，我创建了一个拖放笔，可以在任意两个形状之间进行变形（对于具有 viewBox="0 0 100 100" 且只有一个 <path> 的 SVG 最佳效果）

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 变形机器。

如果您是 Adobe Muse 的用户，您可能对 Muse Morph 小部件 感兴趣，它结合了 Illustrator、Muse 和 Greensock MorphSVG。

SnapSVG

SnapSVG 的 animate() 函数 将动画化 SVG 元素的属性，包括路径数据。Codrops 提供了此功能的出色示例。这里有一部小电影展示了其中的一些。

从某种意义上说，SnapSVG 是 Raphaël 的哥哥，它可以执行这样的操作

anime.js

较新的 anime.js 库内置了形状变形功能。

CSS

有点难以置信，但 CSS 也开始参与形状变形操作！Chrome 开发人员 Eric Willigers 去年给我发了一封邮件

“d” 已经成为一个表示属性。这允许使用 CSS 动画和 Web 动画以及 path(‘…’) 关键帧来动画化 SVG 路径元素。

我认为这是一个规范更改，因此除了 Chrome 之外的其他浏览器也可能会开始允许这样做。目前，这在 Chrome 中运行良好。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 简单的路径示例。

SVG Morpheus

SVG Morpheus 是一个完全致力于形状变形的 JavaScript 库。这是一个很棒的演示。

查看 CodePen 上 Noel Delgado (@noeldelgado) 的笔 移动电话的演变（SVG 形状变形）。

KUTE.js

有一个 用于 Kute.js 的 SVG 插件，它允许动画化 SVG 属性，包括形状变形。

查看 CodePen 上 thednp (@thednp) 的笔 使用 KUTE.js 变形 SVG。

API 为您提供了一些对变形的控制，例如您希望它达到多精确以及反转绘制方向以使不同的点匹配以进行过渡的能力。

d3

d3，可能是数据可视化人员中最大的库，也可以进行形状变形。这是一个 Mike Bostock 的演示 的 GIF 记录。

还有一个名为 d3-interpolate-path 的 d3 插件可以帮助改进它。

当 A 和 B 具有不同数量的点时，平滑地插值路径 `d` 属性。

mo.js

“网络上的运动图形” 是 mo.js 的标语，另一个较新的库。Oleg Solomka (@LegoMushroom) 提供了一些关于它功能的令人难以置信的演示。

查看 CodePen 上 LegoMushroom (@sol0mka) 的笔 Mole :: 属性曲线示例。

bodymovin

如果您碰巧在成为网页设计师之前是视频设计师（或者您两者兼而有之），那么您可能在 Adobe After Effects 中有工作经验，它专注于创建“令人难以置信的运动图形和视觉效果”。bodymovin 库将 After Effects 导出到 SVG，包括大量的热变形操作。这是一个很棒的演示。

查看 CodePen 上 kittons (@airnan) 的笔 svg 啾啾怪物。