Javascript 沿着循环路径的jQuery动画

我正在用jQuery动画创建一个UI。目标是有一个循环菜单，当我们点击一个链接时，一个对象沿着循环菜单的外部路径。 嗯。。不清楚？让我给你看看我的小提琴：

这是我第一次尝试：

}

这一尝试带来了一个问题。。如果绿点在，比如说90，你点击270，它会因为一些我不理解的原因变得疯狂。但还是停在正确的位置

第二点：

}

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

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

我觉得这不是很好。。我希望我能避免那样

我正在使用，关于它的文档很少

有什么建议吗

更新

这是一个基于形状必须移动的距离的真实线性速度。你甚至可以设置一个速度系数：）

我不明白为什么会出现这种疯狂，但这里有一些解决方法：

如果您可以容忍逆时针方向运行，则只需删除

dir

参数，或将其设置为

dir:1

，它看起来“正常”

如果不考虑方向，您只需要最短的距离，您可以执行以下操作：

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

然后在参数中设置

dir:which_dir

。这似乎避免了疯狂

如果您必须按顺时针方向（我猜您可能会这样做，因为您在所有示例中都将

dir

设置为-1），那么您可以使用两个动画循环（聪明，顺便说一句），并通过覆盖默认的“放松”设置（即“摆动”）避免在0处减速。例如，在，我已将您的动画更改为

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

我刚用了400，因为它显然是默认的持续时间设置。（当然，如果你想让它看起来有一个恒定的速度，你也可以制作这个变量。）如果你仍然需要一个类似摆动的效果，你可以通过延长第二个.animate（）的持续时间来伪造它

---

几年前，我做了一个插件。它被称为

我没有使用arc路径插件或任何其他插件，因此我的方法可能不同。下面是一段代码，其中元素在圆（或椭圆）周围的位置相等：

originalkidsize[i]={
宽度：$（this）.width（），
高度：$（this）.height（）
};
var kidholfheight=$（this）.height（）/2；
var kidHalfWidth=$（this）.width（）/2；
var kidPositions=[]；
对于（变量j=0；j

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

---

请尝试集成CSS3转换：以下是。

我刚刚意识到，不同长度的遍历，有时会进行两次，每次400毫秒，无论如何都会产生不均匀的缓和，因此您可能需要根据特定的遍历设置400个变量。太好了，帮助很大！！！是的，我必须使用选项3，因为我的动画是一辆汽车：）我会用一种更稳定的方法来获得真正的线性动画效果，然后发布最终答案。酷。很高兴我能提供一些帮助（我对这样一个插件的存在感到震惊）。我想知道你最初的问题是否会在插件的GitHub页面上出现bug报告。目前，我已经太累了，无法调查这样的行为是否真的是一个功能，哈哈。虽然这个链接可以回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会无效。好的，添加了与问题相关的更多信息和代码片段。

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

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

            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])))
                });