用反应弹簧变形SVG

自小我就被变形效果所吸引。形状变化的动画总能抓住我的注意力。第一次看到变形效果让我不禁疑惑“哇，他们是怎么做到的？”从那时起，我就创建了演示程序并撰写了一篇关于这种效果的文章。

在支持变形的不同动画库方面，有很多选择。它们中的许多都很好，并提供了许多功能。最近，我迷上了react-spring。React-spring是一个基于React构建的简洁的物理动画库。Adam Rackis最近发布了一个不错的概述。该库具有许多功能，包括（以及许多其他功能）SVG变形。事实上，react-spring的美妙之处在于它如何支持变形。它允许您直接在定义SVG路径描述符的标记中进行变形。从簿记的角度来看，这是很好的。SVG路径描述符通常位于您预期它们所在的位置。

以下是本文探讨内容的视频：

这是一个入职序列中的变形效果。在这里，它用作背景效果。它旨在补充前景动画；使其更突出，而不是占据场景。

创建SVG文档

我们要做的第一件事是创建底层模型。通常，一旦我对我想做什么有了清晰的认识，我就会创建某种设计。我的大多数探索都始于模型，并以演示结束。在大多数情况下，这意味着在我的矢量编辑器中创建一个SVG文档。我使用Inkscape绘制我的SVG。

创建SVG文档时，我使用精确的比例。我发现精确一点更好。对我来说，当我使用与浏览器和代码编辑器中相同的坐标系时，它有助于我感知我想创建的内容。例如，假设您即将创建一个24px ✕ 30px的SVG图标，包括填充。最好的方法是使用完全相同的尺寸——一个宽24像素，高30像素的SVG文档。如果比例结果不正确，则可以随时稍后调整。从这个意义上说，SVG是宽容的。它是可缩放的，无论你做什么。

我们创建的SVG文档宽度为256像素，高度为464像素。

绘制模型

创建模型时，我们需要考虑放置节点的位置以及使用多少个节点。这很重要。这是我们为动画奠定基础的地方。建模就是变形的全部内容。我们有一组节点转换为另一组节点。这些节点集合必须具有完全相同的节点数。其次，这些集合应该以某种方式相关联。

如果矢量形状之间的关系没有经过仔细考虑，动画将不完美。每个节点都会影响动画。它们的位置和曲率必须恰到好处。有关SVG路径中节点构造方式的更多详细信息，请参阅MDN上贝塞尔曲线的解释。

其次，我们需要同时考虑两种形状。其中一个向量可能包含在另一个向量中找不到的部分。或者，两个模型之间可能存在其他差异。对于这些情况，最好在某些地方插入额外的节点。最好制定策略。例如，这个角在那里，这条直线膨胀成曲线等等。

我整理了一个笔来说明当集合相关性差与准确设计时的情况。在下面的示例中，左侧的变形效果中的节点是随机放置的。构成数字一和二的节点没有关系。在正确的示例中，节点的放置计划更仔细。这带来了更连贯的体验。

第一个模型

线条工具是我们用来绘制第一个矢量形状的工具。由于我们创建的模型更抽象，因此它稍微宽容一些。我们仍然需要考虑位置和曲率，但这允许更大的随意性。

至于向量和大小，创建变形模型也是如此。这是一个迭代过程。如果第一次不正确，我们总是可以返回并进行调整。通常需要一到两次迭代才能使动画闪耀。以下是完成后的模型外观。

结果是一个具有八个节点的平滑抽象SVG形状。

第二和第三个模型

第一个模型完成后，就可以绘制第二个模型（我们也可以将其视为状态）。这是第一组将变形到的形状。这可能是最终状态，即单个变形效果。或者它可能是沿途的一步，就像一个关键帧。在我们正在查看的情况下，有三个步骤。同样，每个模型都必须与前一个模型相关联。确保模型匹配的一种方法是将第二个向量创建为第一个向量的副本。这样，我们就知道模型具有相同的节点数以及相同的外观和感觉。

小心编辑器。矢量编辑器通常针对文件大小和格式进行优化。保存更改时，它很可能会使模型不兼容。我已经养成在保存文件后检查SVG代码的习惯。如果您熟悉路径描述符格式，这也有帮助。如果您不习惯它，它有点神秘。在矢量编辑器的首选项中禁用优化也是一个好主意。

对第三个形状重复上述过程。复制、重新定位所有节点并设置第三种颜色。

灯光、摄像机……动作!

创建模型后，我们完成了大部分工作。现在是时候查看动画部分了。React-spring带有一组我们可以用于动画和变形的钩子。useSpring是此示例中效果的理想选择。它旨在用于像我们正在创建的这样的单个动画。以下是使用useSpring钩子启动动画的方法。

<code>const [{ x }, set] = useSpring(() => ({
  x: 0,
}));</code>

以上为我们提供了一个动画属性x，围绕它构建我们的变形效果。这些动画属性的一大优点是我们可以更改它们来创建几乎任何类型的动画。如果值不正确，我们可以通过插值来更改它。

第二个参数，set函数，允许我们触发更新。下面是一段代码片段，展示了它的用法。它使用来自react-use-gesture库的手势处理程序useDrag更新动画值x。我们可以在react-spring中触发动画的方式有很多。

<code>const bind = useDrag(
  ({ movement: [x] }) => {
    // ...
    set({ x });
  },
);</code>

我们现在已经准备好将我们的模型（路径描述符）与标记组合起来。通过将animated关键字添加到JSX代码中，我们激活了react-spring的动画系统。通过对先前命名的interpolate进行插值调用，我们将拖动距离转换为变形形状。输出数组包含前面讨论过的模型。为了将它们放在适当的位置，我们只需将路径描述符从SVG文件复制到标记中。现在，三个不同的描述符d，来自三个不同的路径元素，从三个不同的SVG文件复制，组合成一个。以下是使用react-spring动画驱动的JSX节点的外观。

<code><svg ...="">
  <animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

让我们看看标准JSX路径元素与我们当前拥有的元素之间的区别。为了获得变形动画，我们有：

• 添加了animated关键字以使JSX路径元素与React spring一起动画，
• 将描述符d从字符串更改为React spring插值，以及
• 将距离x转换为三个路径描述符之间的关键帧动画。

开发环境

我还没有找到用于处理SVG的完美开发环境。目前，我在矢量编辑器、IDE和浏览器之间来回切换。涉及一些复制和一些冗余。它并不完美，但它有效。我过去曾尝试过解析SVG的脚本。我仍然没有找到可以应用于所有场景的东西。也许只是我做错了。如果不是，如果使用SVG的Web开发能够更无缝一些，那就太好了。

我们开始吧！

最后但并非最不重要的是，演示！

感谢您的阅读！

以上是用反应弹簧变形SVG的详细内容。更多信息请关注PHP中文网其他相关文章！