Html 如何使svg中的一条线振动(振荡移动)

发布于07月15日

假设我们有这样一个简单的svg文件:

<svg height="1000" width="1000">
  <line x1="10" y1="50" x2="250" y2="50"  stroke="black" stroke-width="3" fill="red" />
  <circle cx="270" cy="50" r="20" stroke="black" stroke-width="3" fill="red" />
</svg>

这给了我们一条带和圆的线，我想振动这条线，这个圆(一个振荡，我不确定这个词是否正确，就像风让它移动一样)，所以它给了图形一个生命.

请问我该怎么做这样的动画？

推荐答案

作为起点，您可能需要

使用写为三次贝塞尔的线变换路径中的线
计算其他2条路径作为弯曲曲线上下的位置和形状
在本例中，我在曲线的3个变体之间添加了一个简单的SMIL动画.

4.圆心对应于曲线的终点.或者，您可能需要使用标记.

你可以从这个 idea 开始.

<svg viewBox="0 -50 300 200" width="300"> 
  <path stroke="black" stroke-width="3" fill="red"  d="M10,50C100,50 200,50 250,50">
    <animate 
       attributeName="d"
       values="M10,50C100,50 200,50 250,50;
               M10,50C100,50 200,50 248,80;
               M10,50C100,50 200,50 250,50;
               M10,50C100,50 200,50 248,20; 
               M10,50C100,50 200,50 250,50;"
       dur="5s"
       repeatCount="indefinite"/>
  </path>
   
  <circle cx="250" cy="50" r="20" stroke="black" stroke-width="3" fill="red" >
    <animate 
       attributeName="cx"
       values="250;248;250;248;250"
       dur="5s"
       repeatCount="indefinite"/>
     <animate 
       attributeName="cy"
       values="50;80;50;20;50"
       dur="5s"
       repeatCount="indefinite"/>
  </circle>
</svg>