平滑的动画波浪线

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>     

     

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