SVG路径动画跳转
SVG path animation jump
我想为 SVG 路径设置动画。我有相同的贝塞尔设置相同的点。当我向矩形中心移动 2 个点时，动画跳动且不流畅。
我发现如果这些点最初不在直线路径上，那么动画很流畅！它看起来像一个错误（
请查看下面演示问题的代码，或在 jsfiddle
上查看
<p>
Jumpy animation
</p>
<svg
width="200px"
height="133px"
viewBox="0 0 200 133"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="#FFFFFF" stroke="#616161" stroke-width="4">
<animate
repeatCount="indefinite"
fill="freeze"
attributeName="d"
dur="1s"
values="
M194.002061,2 L6.04008364,2 C4.93732761,2 3.93634261,2.44884122 3.21071297,3.17293744 C2.4868279,3.89529278 2.03648273,4.89249429 2.03520721,5.99450035 C2.03520685,5.99479332 2.00668933,27.8652779 2.0009858,56.2997166 L2.00099044,75.7284095 C2.00633859,102.416639 2.03165325,123.946234 2.03537152,126.995569 C2.03658483,128.103158 2.48473311,129.104131 3.20922748,129.828298 C3.93400562,130.552748 4.93501692,131 6.04008364,131 L194.002061,131 C195.103988,131 196.103728,130.551165 196.827984,129.826994 C197.551106,129.103958 198,128.10572 198,127.002769 L198,6.00648893 C198,4.90021634 197.552004,3.89812727 196.827599,3.1726896 C196.10443,2.44849045 195.105573,2 194.002061,2 Z;
M194.002061,2 L6.04008364,2 C5.10902172,2 4.31668949,2.30236194 3.85350371,2.90851535 C3.39667486,3.50634969 3.31057704,4.33560556 3.54696163,5.22117815 C3.86947297,6.28159062 12,33.3316693 12,66 C12,98.5769844 3.88123574,126.502941 3.52148092,127.724391 C3.29190054,128.632682 3.3847554,129.480677 3.85171612,130.090231 C4.31671586,130.697225 5.10716799,131 6.04008364,131 L194.002061,131 C194.93514,131 195.729297,130.695801 196.194861,130.088316 C196.654,129.489213 196.743593,128.658124 196.508976,127.7702 C196.191061,126.712841 188,99.1556305 188,66 C188,32.9864348 196.081953,6.47466459 196.47066,5.21865408 C196.704535,4.32673476 196.625248,3.49294113 196.169159,2.8935357 C195.712562,2.29346354 194.928003,2 194.002061,2 Z;
"
/>
</path>
</svg>
<p>Smooth animation</p>
<svg
width="200px"
height="133px"
viewBox="0 0 200 133"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="#FFFFFF" stroke="#616161" stroke-width="4">
<animate
repeatCount="indefinite"
fill="freeze"
attributeName="d"
dur="1s"
values="
M194.002061,2 L6.04008364,2 C5.01864027,2 4.13094436,2.38711966 3.54504923,3.05900142 C2.96245482,3.72709805 2.69875705,4.65340158 2.8319904,5.66241724 C2.94868384,6.43004297 7,33.3049889 7,66 C7,98.6124871 2.94857998,126.406308 2.81356562,127.323487 C2.6863776,128.338493 2.95459365,129.271195 3.54304738,129.943133 C4.13015485,130.613535 5.01675297,131 6.04008364,131 L194.002061,131 C195.024357,131 195.913135,130.612952 196.500141,129.941232 C197.083085,129.274159 197.347862,128.349268 197.215493,127.34166 C197.098926,126.569179 193,99.1791137 193,66 C193,32.9505546 197.046245,6.61163817 197.194423,5.65815893 C197.326276,4.64771432 197.066516,3.7189792 196.484282,3.05011469 C195.903212,2.38258626 195.021469,2 194.002061,2 Z;
M194.002061,2 L6.04008364,2 C5.10902172,2 4.31668949,2.30236194 3.85350371,2.90851535 C3.39667486,3.50634969 3.31057704,4.33560556 3.54696163,5.22117815 C3.86947297,6.28159062 12,33.3316693 12,66 C12,98.5769844 3.88123574,126.502941 3.52148092,127.724391 C3.29190054,128.632682 3.3847554,129.480677 3.85171612,130.090231 C4.31671586,130.697225 5.10716799,131 6.04008364,131 L194.002061,131 C194.93514,131 195.729297,130.695801 196.194861,130.088316 C196.654,129.489213 196.743593,128.658124 196.508976,127.7702 C196.191061,126.712841 188,99.1556305 188,66 C188,32.9864348 196.081953,6.47466459 196.47066,5.21865408 C196.704535,4.32673476 196.625248,3.49294113 196.169159,2.8935357 C195.712562,2.29346354 194.928003,2 194.002061,2 Z;
"
/>
</path>
</svg>
<p>How to create smooth animation that starts at the same point as the first rectangle? </p>
我发现在矢量编辑器中拖动节点时，节点类型发生变化
因此，即使形状的初始路径和最终路径中的节点数相等，也无法获得流畅的动画。
还有待解决如何防止类型节点在拖动时发生变化的问题
我发现大多数情况下 自动平滑点的类型 更改为其他类型的节点点
因此，我尽量避免使用这种类型的节点。
我首先创建了一个具有凹边的矩形，然后将这些边转换为直线。
使用这种技术，节点类型没有改变，动画变得流畅。
<p>Smooth animation</p>
<svg
width="200px"
height="133px"
viewBox="0 0 200 133"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF" stroke="#616161" stroke-width="4">
<animate
repeatCount="indefinite"
fill="freeze"
attributeName="d"
dur="3s"
values="
m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3-0.7-34.2-0.7-53.7 0-18.3 0.7-55.2 0.7-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-0.5 36.9-0.5 55.2 0 19.4 0.5 35.9 0.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z;
m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3 9.3-34.2 9.3-53.7 0-18.3-9.3-55.2-9.3-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-8.5 36.9-8.5 55.2 0 19.4 8.5 35.9 8.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z;
m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3-0.7-34.2-0.7-53.7 0-18.3 0.7-55.2 0.7-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-0.5 36.9-0.5 55.2 0 19.4 0.5 35.9 0.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z"
/>
</path>
</svg>
我想为 SVG 路径设置动画。我有相同的贝塞尔设置相同的点。当我向矩形中心移动 2 个点时，动画跳动且不流畅。
我发现如果这些点最初不在直线路径上，那么动画很流畅！它看起来像一个错误（
请查看下面演示问题的代码，或在 jsfiddle
上查看<p>
Jumpy animation
</p>
<svg
width="200px"
height="133px"
viewBox="0 0 200 133"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="#FFFFFF" stroke="#616161" stroke-width="4">
<animate
repeatCount="indefinite"
fill="freeze"
attributeName="d"
dur="1s"
values="
M194.002061,2 L6.04008364,2 C4.93732761,2 3.93634261,2.44884122 3.21071297,3.17293744 C2.4868279,3.89529278 2.03648273,4.89249429 2.03520721,5.99450035 C2.03520685,5.99479332 2.00668933,27.8652779 2.0009858,56.2997166 L2.00099044,75.7284095 C2.00633859,102.416639 2.03165325,123.946234 2.03537152,126.995569 C2.03658483,128.103158 2.48473311,129.104131 3.20922748,129.828298 C3.93400562,130.552748 4.93501692,131 6.04008364,131 L194.002061,131 C195.103988,131 196.103728,130.551165 196.827984,129.826994 C197.551106,129.103958 198,128.10572 198,127.002769 L198,6.00648893 C198,4.90021634 197.552004,3.89812727 196.827599,3.1726896 C196.10443,2.44849045 195.105573,2 194.002061,2 Z;
M194.002061,2 L6.04008364,2 C5.10902172,2 4.31668949,2.30236194 3.85350371,2.90851535 C3.39667486,3.50634969 3.31057704,4.33560556 3.54696163,5.22117815 C3.86947297,6.28159062 12,33.3316693 12,66 C12,98.5769844 3.88123574,126.502941 3.52148092,127.724391 C3.29190054,128.632682 3.3847554,129.480677 3.85171612,130.090231 C4.31671586,130.697225 5.10716799,131 6.04008364,131 L194.002061,131 C194.93514,131 195.729297,130.695801 196.194861,130.088316 C196.654,129.489213 196.743593,128.658124 196.508976,127.7702 C196.191061,126.712841 188,99.1556305 188,66 C188,32.9864348 196.081953,6.47466459 196.47066,5.21865408 C196.704535,4.32673476 196.625248,3.49294113 196.169159,2.8935357 C195.712562,2.29346354 194.928003,2 194.002061,2 Z;
"
/>
</path>
</svg>
<p>Smooth animation</p>
<svg
width="200px"
height="133px"
viewBox="0 0 200 133"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="#FFFFFF" stroke="#616161" stroke-width="4">
<animate
repeatCount="indefinite"
fill="freeze"
attributeName="d"
dur="1s"
values="
M194.002061,2 L6.04008364,2 C5.01864027,2 4.13094436,2.38711966 3.54504923,3.05900142 C2.96245482,3.72709805 2.69875705,4.65340158 2.8319904,5.66241724 C2.94868384,6.43004297 7,33.3049889 7,66 C7,98.6124871 2.94857998,126.406308 2.81356562,127.323487 C2.6863776,128.338493 2.95459365,129.271195 3.54304738,129.943133 C4.13015485,130.613535 5.01675297,131 6.04008364,131 L194.002061,131 C195.024357,131 195.913135,130.612952 196.500141,129.941232 C197.083085,129.274159 197.347862,128.349268 197.215493,127.34166 C197.098926,126.569179 193,99.1791137 193,66 C193,32.9505546 197.046245,6.61163817 197.194423,5.65815893 C197.326276,4.64771432 197.066516,3.7189792 196.484282,3.05011469 C195.903212,2.38258626 195.021469,2 194.002061,2 Z;
M194.002061,2 L6.04008364,2 C5.10902172,2 4.31668949,2.30236194 3.85350371,2.90851535 C3.39667486,3.50634969 3.31057704,4.33560556 3.54696163,5.22117815 C3.86947297,6.28159062 12,33.3316693 12,66 C12,98.5769844 3.88123574,126.502941 3.52148092,127.724391 C3.29190054,128.632682 3.3847554,129.480677 3.85171612,130.090231 C4.31671586,130.697225 5.10716799,131 6.04008364,131 L194.002061,131 C194.93514,131 195.729297,130.695801 196.194861,130.088316 C196.654,129.489213 196.743593,128.658124 196.508976,127.7702 C196.191061,126.712841 188,99.1556305 188,66 C188,32.9864348 196.081953,6.47466459 196.47066,5.21865408 C196.704535,4.32673476 196.625248,3.49294113 196.169159,2.8935357 C195.712562,2.29346354 194.928003,2 194.002061,2 Z;
"
/>
</path>
</svg>
<p>How to create smooth animation that starts at the same point as the first rectangle? </p>
我发现在矢量编辑器中拖动节点时，节点类型发生变化
因此，即使形状的初始路径和最终路径中的节点数相等，也无法获得流畅的动画。
还有待解决如何防止类型节点在拖动时发生变化的问题
我发现大多数情况下 自动平滑点的类型 更改为其他类型的节点点
因此，我尽量避免使用这种类型的节点。
我首先创建了一个具有凹边的矩形，然后将这些边转换为直线。
使用这种技术，节点类型没有改变，动画变得流畅。
<p>Smooth animation</p>
<svg
width="200px"
height="133px"
viewBox="0 0 200 133"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF" stroke="#616161" stroke-width="4">
<animate
repeatCount="indefinite"
fill="freeze"
attributeName="d"
dur="3s"
values="
m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3-0.7-34.2-0.7-53.7 0-18.3 0.7-55.2 0.7-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-0.5 36.9-0.5 55.2 0 19.4 0.5 35.9 0.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z;
m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3 9.3-34.2 9.3-53.7 0-18.3-9.3-55.2-9.3-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-8.5 36.9-8.5 55.2 0 19.4 8.5 35.9 8.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z;
m5.8 127.8c-1.6-1.6-3-3.7-3-6 0-14.3-0.7-34.2-0.7-53.7 0-18.3 0.7-55.2 0.7-55.2 0 0 0.1-6.5 2.1-8.6C6.7 2.5 12.3 2.3 12.3 2.3H187.9c0 0 4.6 0.9 6.2 2.4 2.9 2.8 2.9 8.3 2.9 8.3 0 0-0.5 36.9-0.5 55.2 0 19.4 0.5 35.9 0.5 53.7 0 2.4-1.3 4.7-3 6.4-1.6 1.6-6 2.7-6 2.7H12.3c0 0-4.8-1.5-6.5-3.2z"
/>
</path>
</svg>