SVG 动画教程：实现线条和圆形振动效果-html教程-PHP中文网

SVG 动画教程：实现线条和圆形振动效果

DDD

发布： 2025-10-04 12:03:23

原创

197人浏览过

svg 动画教程：实现线条和圆形振动效果

本教程旨在指导读者如何使用 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 动画。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

<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 动画的基本技巧，并能够应用到实际项目中。

以上就是SVG 动画教程：实现线条和圆形振动效果的详细内容，更多请关注php中文网其它相关文章！