SVG中实现线条与图形的震动动画教程

本文详细介绍了如何在SVG中通过SMIL动画技术实现线条和圆形等图形的震动或摆动效果。通过将线条转换为贝塞尔曲线路径，并巧妙运用animate标签对路径的d属性以及图形的坐标属性进行周期性改变，从而赋予静态图形以生动的动态效果，并进一步探讨了如何在圆形中嵌入图片并进行动画处理。

在svg（scalable vector graphics）中，为静态图形添加动态效果，例如震动或摆动，可以显著提升用户体验和视觉吸引力。本教程将引导您使用smil（synchronized multimedia integration language）动画技术，实现线条和圆形元素的震动效果，并进一步展示如何在圆形中嵌入图片并使其一同摆动。

1. 将直线转换为可动画的路径

简单的SVG <line> 元素难以直接进行复杂的弯曲动画。为了实现线条的震动效果，我们需要将其转换为 <path> 元素，并利用贝塞尔曲线来定义其形状。贝塞尔曲线的控制点允许我们精确地改变线条的弯曲程度和方向，从而模拟出震动感。

一个直线的路径可以表示为 M起点X,起点Y L终点X,终点Y。为了实现弯曲动画，我们可以使用三次贝塞尔曲线（Cubic Bezier Curve），其指令格式为 M起点X,起点Y C控制点1X,控制点1Y 控制点2X,控制点2Y 终点X,终点Y。通过改变控制点和终点的位置，我们可以创建出不同的弯曲形态。

实现步骤：

1. 定义初始路径： 将直线定义为一个三次贝塞尔曲线，即使它最初看起来是直的。例如，M10,50 C100,50 200,50 250,50 描述了一条从(10,50)到(250,50)的直线，其中两个控制点都在直线上，使其保持平直。
2. 创建震动路径变体： 定义几个不同的路径 d 属性值，分别代表线条向上弯曲、向下弯曲以及恢复原始状态时的形状。这些变体将作为动画的关键帧。
   • 向上弯曲：例如，将终点Y坐标改变，M10,50 C100,50 200,50 248,80。
   • 向下弯曲：例如，将终点Y坐标改变，M10,50 C100,50 200,50 248,20。
3. 应用SMIL动画： 使用 <animate> 标签对 <path> 元素的 d 属性进行动画。values 属性将包含所有定义的路径变体，dur 定义动画持续时间，repeatCount=”indefinite” 使动画无限循环。

2. 实现圆形元素的震动动画

对于圆形元素，震动动画可以通过周期性地改变其中心坐标 (cx 和 cy) 来实现。为了使圆形与线条的震动保持协调，圆形的震动轨迹应与其连接的线条末端的震动轨迹相对应。

实现步骤：

1. 确定震动范围： 根据线条末端的震动幅度，确定圆形的 cx 和 cy 属性的震动范围。
2. 应用SMIL动画： 分别使用两个 <animate> 标签，一个针对 cx 属性，另一个针对 cy 属性。values 属性包含圆形中心在不同震动状态下的坐标值。

3. 示例代码：线条与圆形震动

以下代码演示了如何将一条直线转换为贝塞尔路径并使其震动，同时使一个圆形跟随其末端进行震动。

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

在上述代码中，线条通过改变其三次贝塞尔曲线的终点Y坐标来模拟上下弯曲。圆形则通过改变其 cx 和 cy 坐标来跟随线条末端进行同步震动。

4. 在震动圆形中嵌入图片

如果需要在震动的圆形中显示一张图片而不是纯色填充，我们可以结合使用 <symbol>、<clipPath> 和 <use> 元素。

1. 定义裁剪路径： 使用 <clipPath> 元素定义一个圆形裁剪区域。这将确保图片只在圆形范围内显示。
2. 创建可重用符号： 使用 <symbol> 元素封装 <image> 元素，并将裁剪路径应用到图片上。这样做的好处是 symbol 可以被多次复用。
3. 使用并动画符号： 使用 <use> 元素引用定义的符号。然后，对 <use> 元素的 x 和 y 属性进行动画，使其跟随线条末端进行震动，这与直接动画圆形 cx 和 cy 类似。

5. 示例代码：带图片的震动圆形

<svg viewBox="0 -50 300 200" width="300">
<!-- 定义圆形裁剪路径 -->
<clipPath id="cp">
<circle cx="20" cy="20" r="20" />
</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>

在这个例子中，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图形添加生动的震动效果，从而使您的矢量图形更具表现力和互动性。