Question

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

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

（b）能够通过点击框架按钮选择任何框架（想象屏幕底部的60个小矩形，每个矩形代表一个特定的框架）

（c）能够从给定的帧前进或后退

使用SVG执行此操作的好方法是什么？

例如，假设我有两个圆圈在移动。在每次T（从1到60）时，每个圆都具有位置和半径以及可见性（在一个或多个帧期间它可能是不可见的）。如何构建SVG文件？

请注意，我希望避免使用Javascript（ECMA）来执行此操作。我希望有一个纯粹的SVG解决方案。

Answer 1

我担心如果没有JavaScript，你可能会失败。从理论上讲，完全可以使用SMIL动画，不幸的是，支持不是很好，或者至少是非常不一致。如果您想尝试或者如果您愿意在特定浏览器中使用它，this might give you a starting point：

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

这试图解决你的观点（a）和（b），但我认为它只能在经典的非Blink Opera中使用。我不确定FakeSmile是否可以帮助您获得更一致的行为。

使用SVG进行关键帧仿真的技术

1 个答案: