如何使用贝塞尔曲线沿着路径为图像设置动画

我的目标：

• 沿着如下图所示的路径移动/动画图像（可能是连接bezier曲线）。


• 必须在IE7 +中工作，不要构建多个解决方案。


• 我可以暂停/恢复运动图像。


• 图像将继续沿路径移动（重复）。

• Move/animate an image along a path like the drawing below (Could be connecting bezier curves).
• Must work in IE7+, don't what to build multiple solutions.
• I can pause/resume the moving image.
• The image will keep moving along the path (repeat).

路径http://i50.tinypic.com/dwwhhy.jpg

我考虑过什么

• CANVAS：IE7 + 8不支持，还没有测试过explorercanvas！预见到一些z-index问题。


• SVG，IE7 + 8不支持。


• jQuery.path，一个扩展jQuery动画功能的插件。无法找出简历部分，我想在支持时使用CSS转换。

我的计划

• 使用CSS 3D转换，CSS 2d转换或jQuery.animate（支持的内容）和requestAnimationFrame为图像设置动画。


• 计算所有坐标并逐个像素地简单移动图像。

我的问题

• 我的计划听起来像是疯了吗？更好的建议？


• 您是否预见到一些性能问题？我最终可能会得到5K或10K坐标。


• 你知道一个聪明的方法，一个程序，一个函数或类似的东西来计算所有的坐标吗？