平滑动画波浪线

Question

我正在尝试创建一个平滑的波浪动画，类似于鞭子的运动（我知道，安定下来），此刻我生成了一条路径和两个我正在设置动画的状态。然而，这并不是一个平稳的过渡，而且在它看起来令人信服之前，我还需要添加更多的状态。请参阅下面的代码：

<?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>

Answer 1

正如罗伯特所说，初始补丁和最终补丁的所有参数都应该相同。

两条路径的区别在于初始路径公式中参数"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>

在矢量编辑器中打开此文件，然后按照我在主要答案

平滑动画波浪线

Smoothly animating wavy line

svg

svg-animate

更新