javascript - 沿圆形路径的 jQuery 动画

Question

我正在创建一个带有 jQ​​uery 动画的 UI。目标是有一个圆形菜单，当我们点击一​​个链接时，一个对象会跟随圆形菜单的外部路径。 嗯..不清楚？让我给你看看我的 fiddle :

这是我的第一次尝试:

Fiddle one

function driveTo(new_value){
  pre_value = document.getElementById("pre_value").value;
  var arc_params = {
      center: [180,180],
      radius: 180,
      start: pre_value,
      end: new_value,
      dir: -1
   }
$(".car").animate({path : new $.path.arc(arc_params)})
document.getElementById("pre_value").value = new_value;

这种尝试带来了一个问题。如果绿点位于，比方说 90 而你点击 270 它会因为一些我不明白的原因而变得疯狂。但是然后仍然停在正确的位置？!

我的第二个:

Fiddle two

function driveTo(new_value){
  pre_value = document.getElementById("pre_value").value;

  // catch if the new position is bigger than the previous one
  if (new_value > pre_value) {
    var arc_params = {
            center: [180,180],
               radius: 180,
               start: pre_value,
               end: 0,
               dir: -1
            }
      $(".car").animate({path : new $.path.arc(arc_params)})
    var arc_params = {
            center: [180,180],
               radius: 180,
               start: 0,
               end: new_value,
               dir: -1
            }
      $(".car").animate({path : new $.path.arc(arc_params)})
  }
  else{
    var arc_params = {
            center: [180,180],
               radius: 180,
               start: pre_value,
               end: new_value,
               dir: -1
            }
      $(".car").animate({path : new $.path.arc(arc_params)})
  }

document.getElementById("pre_value").value = new_value;

在这一个中，我试图通过检查新值是否大于前一个值来解决我在第一个命题中遇到的问题。如果为真，则对象必须先转到位置 0，然后继续到新值。

但这样做的问题是，显然物体在达到零时会降低速度，然后再次加速以达到原始目标。

而且我认为这不是很好......我希望我能避免这种情况!

我正在使用 jQuery arc path plugin并且关于它的文档很少..

有什么建议吗？

更新

这是一个better fiddle具有基于形状必须行进的距离的实际线速度。甚至还有一个你可以设置的 speedFactor :)

Answer 1

我不明白为什么会发生这种疯狂，但这里有一些解决方法:

1. 如果您可以忍受逆时针方向，您可以删除 dir 参数，或将其设置为 dir: 1 并且它似乎“表现".

2. 如果你只想要最短距离而不考虑方向，你可以这样做:

   var value_sub = pre_value - new_value;
   var which_dir = value_sub == 90 || value_sub == -270 ? -1 : 1;
   

   然后在参数中设置dir: which_dir。这似乎避免了疯狂。

3. 如果您必须顺时针旋转(我猜您可能会这样做，因为您已将所有示例的 dir 设置为 -1)，您可以使用双动画解决方法(聪明，顺便说一句)并通过覆盖 .animate() 避免在 0 处减速的默认“缓动”设置，即“摆动”。例如，在 http://jsfiddle.net/2mhynskz/8/ , 我已经把你的动画改成这样了

   $(".car").animate({path : new $.path.arc(arc_params)},400,"linear")
   

   我刚刚使用了 400，因为它显然是默认的持续时间设置。 (当然，如果您希望它看起来具有恒定速度，您也可以制作该变量。)如果您仍然需要类似摇摆的效果，您可以通过制作第二个 .animate() 的持续时间来伪造它更长。