Question

我正在使用jQuery动画创建一个UI。目标是使用圆形菜单，当我们单击链接时，对象将跟随圆形菜单的外部路径。嗯..不清楚？让我告诉你我的小提琴：

这是我的第一次尝试：

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;

}

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

但问题是，当物体达到零时，物体会降低速度，然后再次加速以达到原始目标。

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

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

有什么建议吗？

更新

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

Answer 1

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

如果您可以忍受逆时针方向，则可以删除dir参数，或将其设置为dir: 1，它似乎＆＃34;表现为＆＃34;。< / p>
如果您只想要最短的距离，无论方向如何，您都可以执行以下操作：
```
var value_sub = pre_value - new_value;
var which_dir = value_sub == 90 || value_sub == -270 ? -1 : 1;
```
然后在参数中设置dir: which_dir。这似乎避免了疯狂。
如果你必须顺时针（并且我猜你可能，因为你的dir设置为-1所有的例子），你可以使用你的双动画解决方法（聪明，BTW）并通过覆盖.animate()的默认＆＃34;缓和＆＃34;来避免在0处减速。设置，即＆＃34; swing＆＃34;。例如，在http://jsfiddle.net/2mhynskz/8/，我已将您的动画更改为
```
$(".car").animate({path : new $.path.arc(arc_params)},400,"linear")
```
我刚刚使用了400，因为它显然是默认的持续时间设置。（当然，你也可以制作那个变量，如果你希望它看起来具有恒定的速度。）如果你仍然需要类似摆动的效果，你可以通过制作第二个.animate（）＆＃39来伪装它。 ;持续时间更长。

Answer 2

几年前，我为此制作了一个插件。它被称为jQuery Vortex。

我没有使用arc path插件或任何其他插件，所以我的方法可能不同。以下是代码片段，其中元素围绕圆（或椭圆）均匀定位：

            originalKidsSize[i] = {
                width: $(this).width(),
                height: $(this).height()
            };

            var kidHalfHeight = $(this).height() / 2;
            var kidHalfWidth = $(this).width() / 2;

            var kidPositions = [];

            for (var j = 0; j < positionsCount; j += 1) {

                kidPositions.push({
                    top: ((1 + Math.sin(offsetPosition + (j / radiantFactor))) * vortexHalfHeight) - kidHalfHeight,
                    left: vortexHalfWidth * (1 + Math.cos(offsetPosition + (j / radiantFactor))) - kidHalfWidth
                });

            }

            var positionIndex = i * Math.round(positionsCount / kids.length);

            kidsPositionIndexes[i] = positionIndex;

            var radiantVariable = (Math.sin(offsetPosition + positionsRadiants[positionIndex]) * settings.deepFactor);
            var resizeFactor = (1 + radiantVariable);

            var newWidth = originalKidsSize[i].width * resizeFactor;
            var newHeight = originalKidsSize[i].height * resizeFactor;

            $(this)
                .css({
                    "width": newWidth,
                    "height": newHeight,
                    "top": kidPositions[positionIndex].top - ((newHeight - (originalKidsSize[i].height)) / 2),
                    "left": kidPositions[positionIndex].left - ((newWidth - (originalKidsSize[i].width)) / 2),
                    "z-index": 200 + Math
                        .round(100 * (Math
                            .sin(offsetPosition + positionsRadiants[positionIndex])))
                });

当时CSS3硬件加速转换在不同浏览器中并不成熟，因此应用了CSS2转换。

可以尝试集成CSS3过渡：这里是link at the github repository。

沿着圆形路径的jQuery动画

2 个答案: