平滑地动画化波浪线

Question

平滑地动画化波浪线

3

我正在尝试创建一个光滑的波浪形动画，类似于鞭子的运动（我知道，冷静下来），现在我已经生成了路径并且有两个状态正在进行动画。然而，转换不够平稳，还需要添加更多状态才能使其看起来令人信服。请参见下面的代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
 .st0{
   fill:none;
   stroke:#000000;
   stroke-width:20;
   stroke-miterlimit:10;
   -webkit-transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          transition: 1s;
 }
</style>

<path class="st0" d="M291,302c0,0,0-40,40-40s177,40,177,40">
 <animate attributeName="d" attributeType="XML"
       from="M291,302c0,0,0-40,40-40s177,40,177,40;"
       to="M291,302c0,0,65.3,15.9,148.7-53c50-41.3,68.3,53,68.3,53"
       begin="0"  dur="1s" repeatCount="indefinite" />
</path>
</svg>

- user5281710

1

如果您想要平滑地动画化数字并且命令的类型和路径必须相同。您有M、c、s转换到“from”是M、C、s但是“to”命令是M、c、c。您需要将“from”建模为M、c、s（或者如果更容易的话将另外两个路径建模为M、c、c）。 - Robert Longson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexandr_TT · Accepted Answer

正如Robert所说，初始和最终路径的所有参数都应该相同。

通过初始路径公式中参数"s"的存在，可以区分两条路径。

 "M291,302c0,0,0-40,40-40s177,40,177,40;"
 "M291,302c0,0,65.3,15.9,148.7-53c50-41.3,68.3,53,68.3,53"

需要将两条路径的公式给到相同数量的点和相同的参数集。

为此，在向量编辑器中，您需要将初始路径转换为最终路径，保留节点点数。

您的"s"参数控制初始路径的第二个节点。

稍微移动一下就足以使其从路径公式中消失。

在矢量编辑器中保存文件*.svg，但不要关闭编辑器。
将初始路径的公式复制到您的动画应用程序中。

d="m291 302c0 0 129 1 173-33 32-24 40 41 40 41"

通过拖动节点点到最终路径位置重新编辑图像

将最终路径公式复制到您的应用程序中。

为了使动画过渡从初始位置到最终位置再返回到初始位置看起来更加平滑，需要指定三个路径位置。

"m291 302c0 0 5-40 45-40 40 0 172 40 172 40;
 m291 302c0 0 129 1 173-33 32-24 40 41 40 41;
 m291 302c0 0 5-40 45-40 40 0 172 40 172 40"

最终动画代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
 .st0{
   fill:none;
   stroke:#000000;
   stroke-width:15;
   stroke-linejoin:round;
   stroke:orangered;
  
 }
</style>

<path class="st0" d="m291 302c0 0 5-40 45-40 40 0 172 40 172 40" >
<animate attributeName="d" attributeType="XML" dur="4s"  repeatCount="indefinite"
values=
"m291 302c0 0 5-40 45-40 40 0 172 40 172 40;
 m291 302c0 0 129 1 173-33 32-24 40 41 40 41;
 m291 302c0 0 5-40 45-40 40 0 172 40 172 40" />
</path>
 
</svg>

更新

在评论中回答问题

从您的文件中删除命令 - <animate attributeName="d"../>

编辑文件并保存：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
 .st0{
   fill:none;
   stroke:#000000;
   stroke-width:20;
   stroke-miterlimit:10;
  
 }
</style>

<path class="st0" d="M291,302c0,0,0-40,40-40s177,40,177,40" />
 
</svg>

在矢量编辑器中打开此文件，然后按照主要答案中的说明进行操作。