1

我正在尝试采用响应用户鼠标移动而变形的 svg 路径，并在用户单击按钮时将其扩展为稳定的矩形。当前项目在这里（请注意，这是取自一个 codrops 演示，有一些改动）：https ://codepen.io/redheadedmandy/pen/RjBKeQ

假设有一种方法可以调用 SVG 的当前坐标，我想我会在单击按钮时执行以下操作：

var currentPoints = ; // insert current path here

var clickMorph = anime({
    targets: '.morpho',
    d: [
        {currentPoints},
        {value: ''} // I also need to figure out what the best way to morph it into a retangle is... 
    ],
    easing: 'easeOutQuad',
    duration: 1500,
    loop: false
});

问题是我不知道形状路径的坐标在任何给定时间在哪里——据我所知，为了使引导变形为矩形，anime.js 需要初始坐标小路。（我可能完全错了。）如果有人对如何做到这一点有建议，我将不胜感激！（或者，如果您注意到我对anime.js 的理解完全有缺陷，那也会有所帮助。）

4

1 回答 1

1

在我看来，掌握 SVG 动画 JS 库的最佳实践是了解创建最简单的 SVG 图形及其手动动画的基础知识。
让我通过一个具体的例子向您展示如何做到这一点的一种方法。

创建一个将五边形变形为正方形的动画。

要将一个图形变形为另一个图形，您需要两个具有相同数量节点的补丁。
在我们的例子中，如果五边形应该有五个节点，那么正方形的补丁也有五个。
在矢量编辑器中绘制形状，例如Inkscape。

  • 设置文档大小 400х400 px 在此处输入图像描述

  • 我们设置贯穿文档中心和锚点的水平和垂直参考线。在下图中，这些是蓝线。在它们上，我们将在拖动节点时进行导航。

  • 在工具面板中，选择多边形 在此处输入图像描述

  • 将光标设置到文档的中心并绘制一个五边形

在此处输入图像描述

  • 选择菜单：Contour / Ocontur 对象（Shift + Ctrl + C）
  • 我们将文件保存为 *.svg 格式，但编辑器没有关闭
  • 从文件的整个代码中，我们只需要一行属性 d = "m ..z"

<path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />

  • 返回Inkscape，选择工具——编辑轮廓节点，在此处输入图像描述 拖动节点做成正方形

    在此处输入图像描述

  • 再次，保存文件并复制属性 d = "m .." 的新值，我们得到的值需要替换为变量 values = ".." 
values="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z;
         m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z"

分号分隔正方形和五边形的路径值。使用动画，路径将从一个值更改为另一个值。

下面是实现一个图形平滑转换为另一个图形的动画的代码：

单击 svg 时开始动画

 <svg id="svg2" width="400" height="400" viewBox="0 0 400 400" id="svg2" version="1.1">
      
      <g id="layer1" transform="translate(0,-652.36216)" style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue">
        <path d="m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z" >
    	 <animate attributeName="d" begin="svg2.click" dur="6s" fill="freeze" repeatCount="1" restart="whenNotActive" 
          values=" m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z;
		           m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />	  
          

	</path>
      </g>
    </svg>

在哪里，

<animate attributeName="d"- 动画命令属性“d”

begin="svg2.click"- 点击 svg 时开始动画

dur="6s"- 动画持续时间 6 秒

fill="freeze"- 动画结束后，人物冻结在其最终位置

repeatCount="1"- 单次重复

restart="whenNotActive"- 禁止动画重新开始，直到它完成

相同技术的更复杂示例

箭头处带有凹口的动画工具提示
在此处输入图像描述

  • 从 Inkscape 制作的 svg 文件中，复制补丁空白工具提示

<svg version="1.1"  viewBox="0 0 240 240"  >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

  • 通过拖动节点更改工件工具提示的形状

在此处输入图像描述

  • 再次从新的 svg 文件 Inkscape 复制补丁 

<svg id="svg1" version="1.1"  viewBox="0 0 240 240"   >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.4;stroke:#0391fd"/>
  </svg>

  • 就像在第一个示例中一样，我们将动画作为补丁的属性d

body {
  background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bdiv {
  display: table;
}

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}  
<div class="bdiv">
  <div class="container">
    <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <g transform="scale(0.8)">
        <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
          <animate id="an_path" attributeName="d" values="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z  "
          begin="svg1.click" dur="8s" repeatCount="1" fill="freeze"></animate>
        </path>
        <text x="30" y="50" font-size="18" fill="white">click me </text>
      </g>
    </svg>
  </div>
</div>

为补丁的属性“d”设置动画是一个非常强大且高效的工具，它允许您实现各种变换。

掌握并理解了手工制作 SVG 形状动画的方法后，使用库 JS 就容易多了。

于 2017-11-26T17:50:06.410 回答