没有画布的 HTML 动画序列答案

【问题标题】：HTML Animated Sequences WITHOUT canvas没有画布的 HTML 动画序列
【发布时间】：2013-05-07 16:15:42
【问题描述】：

我目前正在计划一个网络项目，其中包含一些需要在网站上运行的动画序列。我需要网站尽可能跨浏览器兼容（呃！），并希望让其他开发人员对不同的选项有想法。

Canvas 不是一个选项，主要是因为 IE。仅支持 IE9+ 还不够好，即使 IE 浏览器统计数据的“进步”近乎可笑 http://www.w3schools.com/browsers/browsers_stats.asp（2013 年 3 月 IE 为 13%（所有 WINDOWS 机器都默认））稍微偏离主题...

我计划为不同阶段的动画预加载一系列动画 gif，例如“run”、“walk”、“fly”，然后在需要时交换 img 标签的 src。我还没有测试过这样的东西，但是即使使用预加载的图像，我也会考虑延迟（尽管 javascript http://www.preloadjs.com ）虽然我不太热衷于动画 GIFS 的质量。把这个想法更进一步，使用相同的方法，但每个 from 作为一个单独的 PNG？可行吗？

或者，一个带有 spritesheet 的 DOM 元素可以作为背景图像工作，改变每一步的背景位置吗？

任何想法或示例；）将非常有帮助！ :)

干杯，罗里！

---编辑

我也对不同的 javascript 库开放.. 虽然目前包含在我的项目中的是 jQuery 和 Rapheal

【问题讨论】：

也许您可以使用动画 SVG（带有 IE 后备，我现在找不到）？我不确定 IE 后备将如何处理动画。普通的 SVG 动画效果很好（例如使用 jQuery）。
目前我正在使用 RafaelJS，它使用 SVG，然后依靠某种巫术使 IE6 工作。但我不知道你可以用它做位图序列动画，我会做一些挖掘，谢谢你的时间！
我很好奇你发现了什么。让我们保持最新状态？
银行假期周末！当我明天到办公室进行实验时，我会及时通知你我的发现！

标签： javascript jquery html css cross-browser

【解决方案1】：

jQuery animate 将是你最好的选择。如果你有时间生成一个 sprite sheet 来显示不同的动画阶段，那么你可能有足够的时间研究一个好的 jquery 插件，比如gameQuery，它可以让你为 sprite sheet 项设置动画。

【讨论】：

谢谢，尽管我不认为使用 gameQuery 对我有用，因为我没有构建游戏，而且不需要的东西有很多开销。但是看到那个例子是有用的，因为我可以看到他们已经开始制作动画了。精灵表和移动背景位置！谢谢，我已经做了一个快速的 browserstack.com 测试来检查它的跨浏览器兼容性
@RoryPickering 你的观察完全正确。您真的不需要使用插件构建“游戏”。只要您知道您的目标是什么并且有一些训练有素的 javascript 经验，您就可以将 gameQuery 用于任何需要 javascript 动画的事情。它不一定是游戏。此外，它是一个真正灵活的包，适用于移动和桌面设备。祝你好运！
谢谢老兄！刚刚在浏览器堆栈上对 ie6-7-8-9 进行了快速测试，它没有显示 6 和 7 上的动画字符。公平地说，它仍然比画布更好。所以当我开始这个项目时，这是一个明确的选择！