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

这是一个相当大的问题，我只是希望能找到一些方向..我不指望任何人都这样做整个事情......但宁可学习如何去做这样的项目吧。在这里，我们去：基于右和左控件和摩擦的jQuery圆形动画

我想实现这个动画：

enter image description here

基本上什么正在发生的事情在这里，我需要有一个半椭圆形和球约束它，当你按下左边和右边的箭头需要慢慢地从左到右快速移动，并且基于按钮点击的速度，它需要完成斜坡或停止和下降。想象一下滑板和坡道。

我知道的jQuery的基础知识，但圆形的动画和摩擦的影响是我迷路..

任何帮助/方向/建议不胜感激。谢谢。

来源

2013-08-01 Dawid van der Hoven

你可能需要像[Box2D的-JS（http://box2d-js.sourceforge.net/index2.html） –

你的肯定会需要一个物理引擎。我很好奇你计划如何沿着弧顶前进。你能提供更多的信息吗？我会认为如果它从一个方面走了，它会直线上升，然后掉下来，而不是在那个弧线上显示 –

那么，物理引擎有点硬核是不是？我的意思是这不必是100％准确的，只是类似的....对于我想到这个插件的弧：http://heygrady.com/blog/2011/07/20/animating-with-curves在jQuery的/只是有点隐藏行的顶部...但不能肯定... –

我想为动画部分答案：如果您没有问题HTML5则有两种方式去动画：

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

或使用HTML5 Inline 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

来源

2013-08-17 07:07:18 nanoquack

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

回答

相关问题