基于左右控制和摩擦的jQuery循环动画

Question

这是一个相当大的问题，我只是希望找到一些方向...我不希望任何人做这整件事......但是要学习如何去做这样的项目。我们走了：

我正在尝试实现这个动画：

基本上这里发生的是，我需要有一个半椭圆形状和一个约束它的球，当你按下左右箭头时，它需要慢慢地从左到右快速移动并根据按钮的速度点击它需要完成斜坡或停止和停止。想象一下滑板和坡道。

我知道jQuery的基础知识，但圆形动画和摩擦效应是我迷失的地方..

任何帮助/指导/建议都非常赞赏。谢谢。

Answer 1

我正在尝试动画部分的答案： 如果您对HTML5没问题，那么动画有两种方法：

使用HTML5 Canvas，它非常适合提供动态内容。它基本上是一个画布，你可以自由绘制。它是基于像素的并且具有良好的性能，如果做得好，它在绘制许多元素时不会下降很多）。您还应该对其进行双重缓冲，以避免在绘制时出现任何闪烁。

或使用HTML5 Inline Svg。它是基于矢量的，因此与分辨率无关，并且对动画svg元素有很好的支持。与HTML5 Canvas相比，svg的元素是DOM节点，因此您可以直接在DOM-Tree中看到图形元素。

In order to sum up the trade-offs:
HTML5 Canvas
-Pixel-based
-Good Performance
-Free drawing
HTML5 Inline Svg
-Vector-based
-Animations built-in
-Elements are DOM-Nodes

有关更多信息，请参阅 http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/