本教程旨在指导读者如何使用 SVG 和 SMIL 动画，实现线条和圆形产生振动或摆动效果。通过将线条转换为贝塞尔曲线，并结合 animate 元素，可以模拟线条的弯曲和振动。同时，通过动画控制圆形的位置，使其与线条的末端保持同步运动，从而实现整体的动态效果。此外，还介绍了如何在圆形内部嵌入图像，并使其跟随振动动画一起运动。
实现线条振动效果
SVG 本身并没有直接振动线条的属性，因此我们需要借助一些技巧来实现这个效果。一种常见的方法是将 line 元素转换为 path 元素，并使用三次贝塞尔曲线来模拟线条的弯曲。然后，通过 animate 元素改变 path 的 d 属性，从而实现线条的振动效果。
步骤 1：将 Line 转换为 Path
首先，我们需要将简单的 line 元素转换为 path 元素，并使用三次贝塞尔曲线来表示它。原始的 line 元素如下：
<line x1="10" y1="50" x2="250" y2="50" stroke="black" stroke-width="3" fill="red" />
将其转换为 path 元素：
<path stroke="black" stroke-width="3" fill="red" d="M10,50C100,50 200,50 250,50"></path>
这里的 d 属性定义了路径。M10,50 表示起始点为 (10, 50)，C100,50 200,50 250,50 表示三次贝塞尔曲线，其中 (100, 50) 和 (200, 50) 是控制点，(250, 50) 是结束点。
步骤 2：添加 SMIL 动画
接下来，我们使用 SMIL 动画来改变 path 元素的 d 属性，从而实现线条的振动效果。
<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>- attributeName="d" 指定要动画的属性是 d，即路径的定义。
- values 定义了动画的关键帧。在这里，我们定义了 5 个关键帧，分别表示线条的初始状态、向上弯曲、恢复、向下弯曲和再次恢复。
- dur="5s" 指定动画的持续时间为 5 秒。
- repeatCount="indefinite" 指定动画无限循环。
步骤 3：同步圆形的运动
为了使圆形与线条的末端保持同步运动，我们需要为圆形添加类似的 SMIL 动画。
<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>这里，我们分别使用 animate 元素来改变圆形的 cx 和 cy 属性，使其与线条的末端同步运动。
在圆形内部嵌入图像
如果想要在圆形内部嵌入图像，可以使用 symbol 和 use 元素。
步骤 1：定义 Symbol
首先，我们使用 symbol 元素来定义一个可重用的图像，并使用 clipPath 来裁剪图像，使其呈现圆形。
<clipPath id="cp"> <circle cx="20" cy="20" r="20" stroke="black" stroke-width="3" fill="red" /> </clipPath> <symbol id="s"> <image xlink:href ="https://assets.codepen.io/222579/darwin300.jpg" width="40" height="40" clip-path="url(#cp)"/> </symbol>
- clipPath 定义了一个裁剪路径，这里是一个圆形。
- symbol 元素定义了一个名为 s 的符号，其中包含一个 image 元素，该图像使用 clip-path 属性引用了我们定义的裁剪路径。
步骤 2：使用 Use 元素
接下来，我们使用 use 元素来引用我们定义的符号，并将其放置在 SVG 中。
<use xlink:href="#s" x="230" y="30">
<animate
attributeName="x"
values="230;228;230;228;230"
dur="5s"
repeatCount="indefinite"/>
<animate
attributeName="y"
values="30;60;30;0;30"
dur="5s"
repeatCount="indefinite"/>
</use>这里，我们使用 use 元素引用了名为 s 的符号，并使用 x 和 y 属性来定位它。同时，我们还为 use 元素添加了 SMIL 动画，使其与线条的振动同步。
完整代码示例
<svg viewBox="0 -50 300 200" width="300">
<clipPath id="cp">
<circle cx="20" cy="20" r="20" stroke="black" stroke-width="3" fill="red" />
</clipPath>
<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>
<symbol id="s">
<image xlink:href ="https://assets.codepen.io/222579/darwin300.jpg" width="40" height="40" clip-path="url(#cp)"/>
</symbol>
<use xlink:href="#s" x="230" y="30">
<animate
attributeName="x"
values="230;228;230;228;230"
dur="5s"
repeatCount="indefinite"/>
<animate
attributeName="y"
values="30;60;30;0;30"
dur="5s"
repeatCount="indefinite"/>
</use>
</svg>注意事项
- SMIL 动画虽然简单易用，但在某些浏览器中可能存在兼容性问题。可以考虑使用 CSS 动画或 JavaScript 动画作为替代方案。
- 在定义贝塞尔曲线的关键帧时，需要仔细调整控制点的位置，以获得最佳的振动效果。
- 可以通过调整 dur 属性的值来控制动画的速度。
- 可以通过调整 values 属性中的关键帧来改变动画的幅度。
总结
本教程介绍了如何使用 SVG 和 SMIL 动画实现线条和圆形的振动效果。通过将线条转换为贝塞尔曲线，并结合 animate 元素，可以模拟线条的弯曲和振动。同时，通过动画控制圆形的位置，使其与线条的末端保持同步运动，从而实现整体的动态效果。此外，还介绍了如何在圆形内部嵌入图像，并使其跟随振动动画一起运动。希望本教程能够帮助读者掌握 SVG 动画的基本技巧，并能够应用到实际项目中。
