使用SVG变形元素

In the realm of web animation, SVG has a number of completely unique methods to move and manipulate elements. Perhaps the most spectacular of these is “morphing”: the ability to move and stretch one element seamlessly into another.

在网络动画领域， SVG具有许多完全独特的方法来移动和操纵元素。 其中最壮观的也许是“变形”：将一个元素无缝移动并拉伸到另一个元素的能力。

建立 (Setup)

The rules for native morphing in SVG are fairly simple: the elements to be morphed must have the same number of points. These do not have to be the same kinds of points, however: it’s entirely possible to morph a bezier curve point into a corner, for example.

SVG中本机变形的规则非常简单：要变形的元素必须具有相同数量的点 。 这些不必是同一种类分，但是：这是完全可能的贝塞尔曲线点演变成一个角落，例如。

Probably the simplest example to start with is an irregular polygon. Something like this:

可能最简单的例子是不规则多边形 。 像这样：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477" />
</svg>

You can easily create this in an application like Adobe Illustrator, exporting the results as SVG to create the following:

您可以在Adobe Illustrator之类的应用程序中轻松创建此文件，并将结果导出为SVG来创建以下内容：

Taking the same file in Illustrator, points are manipulated and moved into their target shape. We’ll use a SMIL <animate> element to target the points of the previous element, mapping them to the new one; at this stage, it’s probably easiest to copy the Illustrator object and paste it into your editor, cleaning up and adding code as needed to produce the following:

在Illustrator中获取相同的文件，将操纵点并将其移动到其目标形状。 我们将使用SMIL <animate>元素来定位上一个元素的点 ，将它们映射到新元素。 在此阶段，最简单的方法是复制Illustrator对象并将其粘贴到编辑器中 ，根据需要清理并添加代码以产生以下内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477">
        <animate attributeName="points" dur="1s"  repeatCount="indefinite"
    to="190,20 374.3,8.3 361.8,479.4 199.3,454.4" />
    </polygon>
</svg>

Which produces:

产生：

There’s a few important points about this code:

这段代码有一些重要的要点：

• the <polygon> moves from being a “self-closed” element (<polygon points=" … " />) to having a closing tag (</polygon>) which encloses the <animate> element.

  <polygon>从原来的“自闭式”元素( <polygon points=" … " /> )变为具有封闭标签( </polygon> )的封闭标签( </polygon> )，该标签包围了<animate>元素。

• dur is “duration”, i.e. how long the morph animation takes to move from one state to another.

  dur是“持续时间”，即变形动画从一种状态转换到另一种状态所花费的时间。

• repeatCount="indefinite" is the SMIL equivalent to CSS “infinite” animation.

  repeatCount="indefinite"是与CSS“无限”动画等效的SMIL。

最近点动画 (Closest-Point Animation)

By default, SVG moves matching points. By moving the points in Illustrator not to their nearest position but in clockwise order, we provide the impression that the element is “rotating”:

默认情况下，SVG移动匹配点 。 通过在Illustrator中的点移动不是他们最近的位置，但以顺时针方向，我们提供了元素“旋转”的印象：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
    <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477">
        <animate attributeName="points" dur="1s" begin="0s" 
    to="371.7,7.7 363,480.3 199.7,454.3 190,19" />
    </polygon>
</svg>

Creates this:

创建此：

更复杂的形态：隐藏点 (More Complex Morphs: Hiding Points)

To animate between shapes that appear completely different, it becomes necessary to “hide” points inside elements. For example, to turn a star into a circle, it’s easiest to start by creating the latter, adding points inside it:

为了在看起来完全不同的形状之间建立动画，必须“隐藏”元素内部的点。 例如，要将星星变成圆形，最简单的方法是创建一个圆形，并在其中添加点：

Circle prepared for morphing into another shape, showing hidden points

准备变形成另一种形状的圆，显示出隐藏点

Alternate points on the circle can then be moved and altered to create the star.

然后可以移动和更改圆上的替代点以创建星形。

终止冲击 (Termination Shock)

Recently the Chrome development team announced plans to deprecate SMIL in their browser in favor of other technologies, such as the Web Animation API and CSS animations. This does not mean that SMIL will be removed from the browser, only that Google is advising developers to look at using alternative technologies. Unfortunately, target morphing is not something that these alternates address yet, although Greensock’s recent announcement of MorphSVG looks like it could be a good option.

最近，Chrome开发小组宣布了计划在其浏览器中弃用SMIL ，转而使用其他技术，例如Web Animation API和CSS动画。 这并不意味着将从浏览器中删除 SMIL，仅表示Google建议开发人员考虑使用替代技术。 不幸的是，目标变形还不是这些替代品要解决的问题，尽管Greensock最近宣布推出MorphSVG似乎是一个不错的选择。

用CSS变形 (Morphing with CSS)

It’s entirely possible to morph rectangles into elliptical shapes using CSS, via manipulation of the border-radius property. For example, taking a square:

通过操作border-radius属性，完全有可能使用CSS将矩形变形为椭圆形。 例如，取一个正方形：

#source { 
width: 20rem; height: 20rem;
background: red;
animation: morph 2s alternate;
}

…and then animating it with the following:

…然后使用以下动画：

@keyframes morph {
    to { border-radius: 50%; background: blue; }
}

Variations on the same technique could be used to curve one or several corners, also via border-radius. The limitation is that this can only be applied to simple rectangles and ellipses, rather than the complex and arbitrary shapes supported by SVG.

同样的技术的变化也可以用来通过border-radius弯曲一个或几个角。 局限性在于它只能应用于简单的矩形和椭圆，而不能应用于SVG支持的复杂和任意形状。

结论 (Conclusion)

I find morphing with SVG particularly wonderful, harkening back to some of the original advantages and features of Flash animation. However, it can be taken further and in many different directions, as I’ll show in the next article.

我发现使用SVG进行变形特别棒，使人回想起Flash动画的某些原始优点和功能。 但是，可以在更多不同的方向上更进一步，正如我将在下一篇文章中介绍的那样。

翻译自: https://thenewcode.com/36/Morphing-Elements-with-SVG