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

Question

这是一个相当大的问题，我只是希望找到一些方向......我不希望任何人做这整个事情......而是学习如何进行这样的项目。开始了：

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

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

我知道 jQuery 的基础知识，但圆形动画和摩擦效果是我迷路的地方。

非常感谢任何帮助/方向/建议。谢谢你。

Answer 1

I'm trying an answer for the animation part: If you are ok with HTML5 then for the animations there are two ways to go:

Either use HTML5 Canvas, which really works well for providing dynamic content. Its basically a canvas on which you can freely draw. It's pixel based and has a good performance and, if done right it does not decline very much when drawing many elements). You should also double-buffer it in order to avoid any flickering when drawing.

Or use HTML5 Inline Svg. It's vector based, so resolution-independent and has good support for animating svg elements. In contrast to HTML5 Canvas the elements of the svg are DOM-Nodes, so you see the graphic elements directly in your 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

For much more information, see http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/