javascript - 基于左右控制和摩擦力的jQuery圆形动画

标签 javascript jquery css

这是一个相当大的问题,我只是希望找到一些方向......我不希望有人做这整件事......而是学习如何进行这样的元素。我们开始吧:

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

enter image description here

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

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

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

最佳答案

我正在尝试动画部分的答案: 如果您对 HTML5 没问题,那么对于动画,有两种方法可以选择:

要么使用 HTML5 Canvas,它确实非常适合提供动态内容。它基本上是一个可以在上面自由绘画的 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/

关于javascript - 基于左右控制和摩擦力的jQuery圆形动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17997621/

相关文章:

css - 如何正确循环 nth-of-type?

javascript - TinyMCE:退格问题

javascript - 将一个 csv 中的值添加到另一个 csv 中

javascript - CORS - 对预检请求的响应未通过访问控制检查

javascript - 如何在 ReactJS 上以 JSON 格式从 API 获取数据并填充下拉列表

javascript - 将焦点设置到剑道数字文本框

javascript - 如何使用 JavaScript/jQuery 编写 onshow 事件?

javascript - .append 和淡入

html - 为什么即使我赚了 margin ,我的按钮也不会移动?

php - 索引中的 Wordpress 插件样式