基于右和左控件以及摩擦力的jQuery圆形动画

Question

这是一个相当大的问题，我希望找到一些方向。 我不指望任何人完成这个项目...但是学会如何处理这样的项目。以下是具体内容：

我试图实现这种动画效果：

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

我知道jQuery的基础知识，但是循环动画和摩擦效应是我迷失的地方。

非常感谢您的任何帮助/指导/建议。谢谢。

- user1278673

---

你可能需要类似box2d-js这样的东西。 - Abraham Uribe

你肯定需要一个物理引擎来实现这个。我很好奇你是如何计划让球沿着顶部弧线移动的。你能提供更多信息吗？如果它从侧面偏离，我认为它会直接向上飞起然后掉下来，而不是像你展示的那样沿着弧线运动。 - Zach Saucier

物理引擎有点难懂，不是吗？我的意思是它不必要求100%准确，只需要相似即可... 对于弧线，我想使用这个插件：http://heygrady.com/blog/2011/07/20/animating-with-curves-in-jquery/，并且只需隐藏线的顶部部分... 但还不确定... - user1278673

你可以像这样扩展jQuery动画来创建路径 jsfiddle。 - Abraham Uribe

jsfiddle 带有 Tween 和曲线。 - Abraham Uribe

哇！谢谢，这是一个很好的起点。 - user1278673

Answer 1

我正在尝试回答关于动画部分的问题：

如果您使用HTML5，那么有两种方法可以进行动画：

一种是使用HTML5 Canvas，它非常适合提供动态内容。它基本上是一个画布，您可以自由绘制。它是像素为基础的，并且具有良好的性能，如果正确使用，即使绘制许多元素，也不会明显下降。您还应该双缓冲以避免在绘制时出现任何闪烁。

另一种是使用HTML5内联SVG。它是基于矢量的，因此与分辨率无关，并且对于动画svg元素具有良好的支持。与HTML5 Canvas相比，svg的元素是DOM节点，因此您可以直接在DOM树中看到图形元素。

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/

- nanoquack