在svg（scalable vector graphics）中，为静态图形添加动态效果，例如震动或摆动，可以显著提升用户体验和视觉吸引力。本教程将引导您使用smil（synchronized multimedia integration language）动画技术，实现线条和圆形元素的震动效果，并进一步展示如何在圆形中嵌入图片并使其一同摆动。
1. 将直线转换为可动画的路径
简单的SVG
一个直线的路径可以表示为 M起点X,起点Y L终点X,终点Y。为了实现弯曲动画，我们可以使用三次贝塞尔曲线（Cubic Bezier Curve），其指令格式为 M起点X,起点Y C控制点1X,控制点1Y 控制点2X,控制点2Y 终点X,终点Y。通过改变控制点和终点的位置，我们可以创建出不同的弯曲形态。
实现步骤：
- 定义初始路径： 将直线定义为一个三次贝塞尔曲线，即使它最初看起来是直的。例如，M10,50 C100,50 200,50 250,50 描述了一条从(10,50)到(250,50)的直线，其中两个控制点都在直线上，使其保持平直。
-
创建震动路径变体： 定义几个不同的路径 d 属性值，分别代表线条向上弯曲、向下弯曲以及恢复原始状态时的形状。这些变体将作为动画的关键帧。
- 向上弯曲：例如，将终点Y坐标改变，M10,50 C100,50 200,50 248,80。
- 向下弯曲：例如，将终点Y坐标改变，M10,50 C100,50 200,50 248,20。
-
应用SMIL动画： 使用
标签对 元素的 d 属性进行动画。values 属性将包含所有定义的路径变体，dur 定义动画持续时间，repeatCount="indefinite" 使动画无限循环。
2. 实现圆形元素的震动动画
对于圆形元素，震动动画可以通过周期性地改变其中心坐标 (cx 和 cy) 来实现。为了使圆形与线条的震动保持协调，圆形的震动轨迹应与其连接的线条末端的震动轨迹相对应。
实现步骤：
- 确定震动范围： 根据线条末端的震动幅度，确定圆形的 cx 和 cy 属性的震动范围。
-
应用SMIL动画： 分别使用两个
标签，一个针对 cx 属性，另一个针对 cy 属性。values 属性包含圆形中心在不同震动状态下的坐标值。
3. 示例代码：线条与圆形震动
以下代码演示了如何将一条直线转换为贝塞尔路径并使其震动，同时使一个圆形跟随其末端进行震动。
在上述代码中，线条通过改变其三次贝塞尔曲线的终点Y坐标来模拟上下弯曲。圆形则通过改变其 cx 和 cy 坐标来跟随线条末端进行同步震动。
4. 在震动圆形中嵌入图片
如果需要在震动的圆形中显示一张图片而不是纯色填充，我们可以结合使用
-
定义裁剪路径： 使用
元素定义一个圆形裁剪区域。这将确保图片只在圆形范围内显示。 -
创建可重用符号： 使用
元素封装 元素，并将裁剪路径应用到图片上。这样做的好处是 symbol 可以被多次复用。 - 使用并动画符号： 使用
5. 示例代码：带图片的震动圆形
在这个例子中，image 元素被放置在一个 symbol 中，并通过 clip-path="url(#cp)" 应用了圆形裁剪。然后，我们通过动画 use 元素的 x 和 y 属性来使其包含的图片在圆形区域内进行震动。需要注意的是，use 元素的 x 和 y 属性定义了符号的左上角位置，因此其 values 需要根据图片在符号内部的相对位置进行调整，以确保圆形中心与线条末端同步。
注意事项与总结
- 坐标系统： 确保 viewBox 设置合理，以便所有元素和动画都在可见区域内。
- 动画平滑度： values 属性中点的数量和 dur 属性的持续时间会影响动画的平滑度。增加关键帧可以使动画更精细，但也会增加代码量。
- 同步性： 当多个元素需要同步动画时，确保它们的 dur 和 values 序列能够精确匹配。
- SMIL的兼容性： 尽管SMIL在现代浏览器中仍受支持，但CSS动画和Web Animations API (WAAPI) 提供了更强大和灵活的动画解决方案。对于更复杂的交互或性能要求，可以考虑这些替代方案。然而，对于本教程中介绍的简单周期性震动，SMIL仍然是一个简洁有效的选择。
- 路径的复杂性： 贝塞尔曲线的控制点是实现复杂曲线动画的关键。熟练掌握贝塞尔曲线的定义对于创建更自然的震动效果至关重要。
通过上述方法，您可以为SVG图形添加生动的震动效果，从而使您的矢量图形更具表现力和互动性。
