jQuery，沿弧线制作动画

Posted 2023-05-08

【中文标题】jQuery，沿弧线制作动画

【英文标题】：jQuery, animate along an arc

【发布时间】：2014-07-07 07:59:52

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

见这里：jqbezier.ericlesch.com

我找到了这个帖子。 ***.com/questions/2240052/…

@KenQ 我还发现，它链接到一个页面，然后该页面也有一个演示链接 - 已损坏，因此我将其关闭。

【参考方案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

【讨论】：

这会在拖动时创建一个“滑块”。不是单击按钮，而且我不想要曲线。