变形:变形 SVG
变形:变形 SVG
原文：https://medium.com/hackernoon/metamorphosis-morphing-svgs-378cf4f3aa58
Blacksmith photo by Jonathan Bean
背景
这是一篇关于 SVG 形状变形的展示和讲述文章。我想分享我使用这项技术的一些经验。在这篇文章中，我将展示我的一些演示，并对每个演示说几句话。它们都以不同的方式涉及形状变形。
那么，什么是变形？这个词本身源于古希腊语。根据维基百科，它起源于大约 500 年前。变形是指动物或物体改变其形状或形态的行为。变化通过一个或几个明确定义的转换发生。维基百科:动物在胚胎期后的正常发育过程中在形态和通常习惯上的变化。除了谈论动物，它还被用在更抽象的上下文中。例如当谈论一个人的性格或外貌时。从词源上看，“metamórph sis”(μεταμόρφωσις)一词源于两个词。他们是“梅塔”(μετά，“后”)和“morphḗ”(μορφή，“形式”)。
计算机上的变形
变形效果出现在 90 年代初，在那里它得到了广泛的使用。不同的视频材料从中受益。电影、商业广告和音乐视频都是变形开始出现的例子。最著名的例子是迈克尔·杰克逊为歌曲《黑白》制作的音乐录影带。单单这一点就让变脸变得流行起来。这篇文章很好地讲述了背后的故事:迈克尔·杰克逊《非黑即白》中的口述历史变形
快进到过去的五年。我们现在已经看到变形进入网络。平面 UI 趋势的兴起、良好的 SVG 兼容性和更快的设备都起到了推动作用。2017 年的今天，可以跨浏览器使用它。我不打算详细说明这项技术是如何工作的。CSS-tricks 中 2014 年的这篇文章涵盖了细节:SVG 形状变形如何工作。此外，这篇 CSS-tricks 文章非常值得一读。它列出了不同的变形工具:许多形状变形工具。
更多可能性
我喜欢 SVG 变形。非常喜欢。足够写一篇关于它的文章了。它为动画工具箱增加了另一个维度。你可以用三种最常见的 CSS 转换做很多事情。我说的是平移、旋转和缩放。然而，这些方法都不能改变动画对象的形状。改变形状和形式的能力带来了巨大的可能性。当与其他动画方法结合时，它变得特别有趣。例如上面提到的三种。例如，你可以变形和改变物体的颜色。将变形与平移一起使用。或者为什么不在不同的时间同时做这三件事。更好的是，创造新的东西。用一些时髦的东西来搭配，比如颜色混合或者渐变。只有你的想象力设定了极限。
工具作业
我使用 anime-js 进行变形。就变形本身而言，这并不是最好的选择。确实存在其他更有针对性的变形选项。这些选项中的一些为你做了更多的繁重工作。我更喜欢动漫，尽管我需要做更多的手工工作。它有一个非常紧凑的语法，它允许我将变形与其他类型的动画结合起来。拥有一种以上的动画几乎是现在的情况。在选择工具时，特性与使用许多库当然也是一个权衡。我通常喜欢减少依赖项的数量。
让我们来看看不同的演示:
子菜单展开
SVG 变形的一个非常有用的用例是，我称之为膨胀/收缩对象。我说的膨胀/收缩是指一种更复杂的放大/缩小物体的方法。假设你有一个复杂的形状，你想缩小。你如何缩小它？缩放对象可能看起来不太好，因为当以较少的像素绘制时，一些细节部分可能会变得模糊。SVG 变形是规避这个特殊问题的一种选择。它允许较小尺寸的物体呈现更简单的形状。那可能是圆形、方形或其他原始形状。下面这支笔用的就是这种手法。菜单图标(三个点)在激活时转换为二级移动工具栏。每个点转化为一个新的位置，并膨胀成一个二级菜单图标。这种膨胀/收缩的概念特别适用于手机。如下所示，变形有助于克服空间限制。
三角形鹿或兔子
如果一个人能变形一个三角形，那么他就能变形三个三角形。如果一个人可以变形三个三角形，那么他可以变形 95 个三角形。这是下笔的主题。
艺术形式的几何/多边形绘画启发我创造了这个演示。很简约。直线以统一而严格的方式构成了形式和形状。细微差别很少。不过，在艺术品中很容易看到被描绘的物体。经过搜索，为了寻找灵感，我找到了一些我非常喜欢的用三角形绘制的动物。这些艺术品由画在白色背景上的大小相似的黑色三角形组成。几乎在一瞬间，我决定在两件艺术品之间创造一个过渡。找到几个不错的候选人后，我勉强接受了两个。我选择一只鹿和一只兔子有两个原因。它们 a)很漂亮，b)三角形的数量几乎相同。
创建这个演示最重要的一个方面是围绕它的后勤工作。有时候，最重要的不是你创造了什么，而是你如何创造。我希望能够迭代。更改、保存、检查结果、更改等。一遍又一遍。为此，我用 Yeoman 建立了一个本地 web 应用程序环境。我摆弄了一下大口。我写了一个将 SVG 文件转换成 Javascript 数组的脚本。我用 anime-js 设置动画。所有这些加在一起，给了我想要的当地工作环境。我现在可以在矢量编辑器(Inkscape)中保存 SVG 文件，并在浏览器中立即得到结果。它根据以下方案工作:
- Gulp 正在监听图像文件( **/)的更改。svg* 。
- 每当 Gulp 检测到一个变化(保存 SVG 文件)时，它就调用一个 NodeJS 脚本。
- 这个脚本解析 SVG 文件，并用贝塞尔曲线数据创建两个数组。一个包含鹿的值，另一个包含兔子的值。
- 浏览器同步检测文件系统中的变化并重新加载浏览器
- 重新加载浏览器会使用重新创建的数组重新启动动画。
上面的内容允许我只使用一个矢量编辑器来逐步构建演示。我可以用最快的方式一个三角形一个三角形地开发演示三角形。我可以推荐考虑和增强您的本地开发环境。当然，它并不总是适用的，但在某些情况下，它可以大大提高速度。
地标变形
地标变形展示了 SVG 变形最常见的用例。即在两个或多个明确定义的形状之间变形。在这种情况下，著名的地标。SVG 形状变形的一个重要方面是跟踪点/节点的顺序。变形，或多或少，几乎总是应用于 SVG 元素<路径>。更具体地说，它应用于它的描述符(d 属性)。这个描述符由许多点组成。它们一起构成了路径的不同几何部分。举例来说，路径元素的一部分是直线、曲线和圆弧。它非常类似于现实生活中在纸上画画，从一点到另一点画一个形状。为了得到想要的变形效果，我用完全相同的方式画出了所有的地标。我从最左边的底角开始。然后我逆时针方向创建节点。所有形状都有完全相同数量的节点(136 个节点)。这里的顺序很重要。第一个形状的第一个节点将移动到第二个形状的第一个节点的位置。如果订单被取消，效果将不会顺利。
拉至刷新
在这个演示中，我尝试了所有微交互中最常见的一种。拉至刷新或 PTR。更多关于微交互的信息，请参考这篇文章:通过微交互提升你的设计。微交互本质上是与单个用户任务相关联的一系列事件。在一般情况下，触发它会产生一连串的动画和视觉反馈给用户。这些动画非常适合 SVG 变形。最常见的是，它们以无缝的顺序出现。在这个例子中，有一个箭头变成了一个圆。使用变形之外的东西就不会这么流畅了。这很可能会在敏感时刻分散用户的注意力。这里使用直观效果很重要。如果不是这样，微交互可能不会那么有效。例如，比较使用交叉渐变。那会更具破坏性，而且会误导用户的注意力。变形在图形元素之间创建了一个更加微妙和自然的连接。重要的是要记住动画不仅仅是为了取悦你的用户。它还应该提供更好的 UX，引导并告诉你的用户幕后发生了什么。
现代复古——IBM 认为
我一直是艺术中极简主义的粉丝。尤其是 60 年代涉及极简主义和印刷术的作品总能吸引我的眼球。现代复古风潮已经持续了一段时间。在某些方面，它是扁平化 UI 趋势的自然延续。伊莎贝拉·卡瓦略的这篇文章对复古艺术和色彩混合提出了很好的见解。这让我想在网页上探索更多的混合颜色。它启发我找到了在这支笔中使用的 CSS 规则混合模式。对我来说，mix-blend-mode 是一个未被充分利用的 CSS 属性。用在恰当的环境中，它可以创造出非常有趣的效果。我觉得和动画结合起来特别有意思。演示中使用的 IBM THINK 海报也在文章中。此外，这篇文章重点介绍了卡尔·郭士纳的一些作品。令人惊讶的是，他的大部分作品至今仍让人感觉很现代。
这支笔使用另一种方法来变形 SVG 元素。该效果是使用 SVG 线条动画技术创建的动画。这支笔中的不同元素实际上是粗笔画，而不是 SVG 路径元素。用专业术语来说，不是 SVG 形状变形，但给人一种类似的感觉。
就是这样！如果你对动漫感兴趣。一定要看看我的另外两篇关于库动画的文章。如何制作复选标记动画和如何制作喜欢的动画。
自从开始写这篇文章以来，我已经创建了一些其他的 SVG 变形演示: