使用SVG进行关键帧模拟的技术

Question

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

(a) 能够逐帧播放60帧模拟

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

(c) 能够从给定帧向前或向后迈进

使用SVG有什么好方法可以做到这一点？

例如，想象我有两个圆圈在移动。在每个时间T(从1到60)，每个圆都有一个位置、半径和可见性(在一个或多个帧期间可能是不可见的)。如何构建SVG文件？

请注意，我希望避免使用Javascript(ECMA)来执行此操作。我希望得到一个纯SVG解决方案。

Answer 1

我担心如果没有JavaScript，你可能会倒霉。理论上，完全可以使用SMIL动画，但遗憾的是，支持不是很好，或者至少不一致。如果你无论如何都想尝试，或者如果你很乐意在特定的浏览器中工作，这可能会给你一个起点：

<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)，但我认为它只在经典的非眨眼歌剧中起作用。我不确定FakeSmile是否能帮助你获得更一致的行为。