使用SMIL和SVG实现元素沿椭圆路径动画

利用SMIL和<animateMotion>实现路径动画

SMIL 是一种 XML 标记语言，用于描述多媒体演示的同步。在 SVG 中，我们可以使用 SMIL 的 <animateMotion> 元素来使元素沿指定的路径移动。这种方法简洁高效，并且具有良好的浏览器兼容性。

示例代码

以下是一个使用 SMIL 和 <animateMotion> 实现圆形元素沿椭圆路径动画的示例：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

<section class="mission-statement">
  <svg viewBox="0 0 1100 690" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
    <circle r="25" fill="blue">
      <animateMotion
        dur="20s"
        fill="freeze"
        path="M124.36,344.22c-185.55,458.08-162.36,458.08,69.58,0,246.83-458.08,270.02-458.08,69.58,0-185.55,394.73-162.36,394.73,69.58,0,233.89-394.73,257.08-394.73,69.58,0-185.55,386.61-162.36,386.61,69.58,0,261.83-386.61,285.03-386.61,69.58,0-185.55,292.39-162.36,292.39,69.58,0,242.89-292.39,266.08-292.39,69.58,0-185.55,261.53-131.3,280.39,69.58,0,193.28-261.53,216.47-261.53,69.58,0-185.98,318.28-162.49,409.19,69.59,0,242-448.33,265.19-448.33,69.58" />
    </circle>
  </svg>
</section>

svg {
  height: 90vh;
}

代码解释：

1. <svg> 元素: 定义了一个 SVG 画布，viewBox 属性设置了画布的坐标系统，height 和 width 定义了画布的尺寸。
2. <circle> 元素: 定义了一个圆形，r 属性设置了圆的半径，fill 属性设置了圆的填充颜色。
3. <animateMotion> 元素: 定义了动画效果。
   • dur 属性设置动画的持续时间为 20 秒。
   • fill="freeze" 属性使动画在结束后停留在最后一帧。
   • path 属性定义了圆形运动的路径。 路径数据使用 SVG 路径命令定义，例如 M (moveto), C (curveto)。

核心属性详解

• path: 这是 <animateMotion> 元素最重要的属性。它定义了元素将要遵循的 SVG 路径。路径数据使用 SVG 路径命令定义，例如 M (moveto), L (lineto), C (curveto), Q (quadratic Bézier curve), A (arc)。
• dur: 指定动画的持续时间，例如 "10s" (10 秒) 或 "2m" (2 分钟)。
• repeatCount: 指定动画重复的次数。可以使用整数值，例如 "3"，也可以使用 "indefinite" 使动画无限循环。
• fill: 确定动画在开始之前和结束之后如何填充。常用的值包括：
  • freeze: 动画在结束后停留在最后一帧。
  • remove: 动画在结束后返回到初始状态。

注意事项

• 浏览器兼容性: 虽然 SMIL 具有良好的浏览器支持，但建议在使用前进行测试，特别是针对旧版本的浏览器。
• 性能优化: 复杂的 SVG 路径和大量的动画元素可能会影响性能。尽量简化路径，减少动画元素的数量，并使用硬件加速来提高性能。
• 替代方案: 如果需要更高级的动画控制或更好的跨浏览器兼容性，可以考虑使用 JavaScript 动画库，例如 GreenSock Animation Platform (GSAP) 或 Anime.js。

总结

使用 SMIL 和 <animateMotion> 元素可以方便地实现元素沿 SVG 路径动画的效果。通过调整 path、dur、repeatCount 和 fill 等属性，可以创建各种各样的动画效果。在实际应用中，需要注意浏览器兼容性和性能优化，并根据需要选择合适的动画方案。