Animation 基于SVG的关键帧仿真技术

我想使用SVG创建一个关键帧模拟，其思想是动画/模拟中的对象在特定时间具有特定位置（或线长度）。例如，我可能已经将1分钟的模拟划分为60个1秒的间隔。我想做三件事：

（a） 能够逐帧播放60帧模拟

（b） 可以通过点击帧按钮选择任何帧（想象屏幕底部有60个小矩形，每个矩形代表一个特定帧）

（c） 能够从给定帧向前或向后迈出一步

使用SVG做这件事的好方法是什么

例如，假设我有两个圆圈在移动。在每个时间T（从1到60），每个圆都有一个位置、半径和可见性（在一个或多个帧中可能不可见）。如何构造SVG文件

---

注意，我希望避免使用Javascript（ECMA）来实现这一点。我希望有一个纯SVG解决方案。

我担心如果没有JavaScript，您可能会运气不佳。从理论上讲，使用SMIL动画是完全可能的，不幸的是，支持不是很好，或者至少不一致。如果您仍想尝试，或者如果您愿意在特定浏览器中使用，请执行以下操作：

---

这试图解决你的（a）和（b）点，但我认为它只适用于经典的非眨眼歌剧。我不确定是否能帮助你获得更一致的行为。

@TylerDurden如果你能在我的答案上有所改进的话，如果你能发布自己的答案，那就太好了。这非常有效，你的“r0.click”语法就是我想要的。

<svg xmlns="http://www.w3.org/2000/svg" width="110" height="230">
  <!-- some moving circle -->
  <circle cx="50" cy="50" r="50">
    <set id="a0" attributeName="cy" to="50"  begin="start.click; r0.click"/>
    <set id="a1" attributeName="cy" to="75"  begin="a0.begin+1s; r1.click"/>
    <set id="a2" attributeName="cy" to="100" begin="a1.begin+1s; r2.click"/>
    <set id="a3" attributeName="cy" to="125" begin="a2.begin+1s; r3.click"/>
  </circle>
  <!-- Rects to address certain frames -->
  <g fill="#d44">
    <rect id="r0" width="20" height="20" y="180"/>
    <rect id="r1" width="20" height="20" y="180" x="30"/>
    <rect id="r2" width="20" height="20" y="180" x="60"/>
    <rect id="r3" width="20" height="20" y="180" x="90"/>
  </g>
  <!-- Play button-->
  <polygon id="start" points="40,210 70,220 40,230" fill="#6d6"/>
</svg>