jQuery，沿弧线制作动画

Question

我真的很难找到一个体面的资源来帮助我开发我需要的东西。我使用过 Google、Stack Overflow 甚至搜索过 Reddit。正如我之前提到的，我是 jQuery 的新手，所以我不了解所有的术语，也不了解方法和最佳实践。

当我单击按钮时，我需要使对象（图像）以曲线运动移动，然后当我再次单击按钮时也能够向后移动，因此图像将从点 1 移动到点 2，并且然后回到原来的位置。此曲线运动应位于浏览器窗口的底部并具有响应性。

这是一个粗略的曲线示例：

最终，当我单击按钮时，会有一些图像移动，但现在我会很高兴只有一个工作！

请有人指点我有用的资源/教程/插件来帮助我实现这一目标？

如果有帮助的话，屏幕底部的图像将是一个全宽的球体，而对象将是天空中围绕它移动的项目（以防万一这让你们中的任何人都记得这个在线实现）

Answer 1

使用以下插件并遵循代码 [https://github.com/Mottie/Pathslider][1] 运行这段代码，它会显示一个弧

<style>

#slider {


 background : #eee url();
  width      : 316px;
  height     : 91px;

}

<script>
jQuery(function($){
  $("#slider").pathslider({
    points     : [ 8,83,75,-100,-75,-100,308,83 ],
    value      : 50,
    rotateGrip : true,
    tolerance  : 3,
    range      : 30,
    curve      : { width:4, color:"#333", cap:"round" }
  });
});
</script>

你也可以访问它的网页

Slider