如何平滑jquery动画答案

【问题标题】：how to smooth jquery animations如何平滑jquery动画
【发布时间】：2012-09-17 11:27:23
【问题描述】：

我想平滑一些 jquery.animate 函数的链接。

这是我描述问题的 jsfiddle： http://jsfiddle.net/xavier_seignard/KTxbb/4/

如您所见，每个动画之间都有一个停止点，即使是线性属性。

你知道如何平滑它吗？或者还有什么可以解决问题的？

问候

【问题讨论】：

在 fx 15/Mac 上我看不到动画之间的任何停顿...您可以观察到此设置的持续时间为 2/3000 毫秒
还有其他人看到那个小提琴的渲染问题吗？在 MacOS X 上使用 Chrome 21.0.1180.89，我看到了遗留的条纹。我在自己的代码中看到过类似的情况，但无法将其隔离到可报告的测试演员表中。
@Alnitak 来自你的视频卡
@MihaiIorga 在我的应用程序上它只开始在 Chrome 18 周围发生，但我无法隔离它。它也发生在其他 Mac 上的其他卡上。
@Alnitak ，我也有同样的问题（chome 21/MacOs X）

标签： javascript jquery jquery-animate

【解决方案1】：

您可以更改速度以获得更“精细”的动画，您会看到停止，因为速度太快且尺寸不同而无法覆盖：

function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}

【讨论】：

这有点好，但我最终还是使用了 jquery.crSpline 插件 (ijin.net/crSpline/demo.html)，它可以自动沿着点列表平滑动画。这是一个简单的演示：xseignard.github.com/test-crspline 和相关代码：github.com/xseignard/test-crspline/blob/master/js/site.js
对于它的价值，这看起来更像你之后的原因是原始小提琴中有一个错误：你不能在第二个参数中指定动画类型（linear）方式你有它在你的小提琴。上面的代码实际上正确地指定了线性属性，从而使它看起来更像你想要的。这就是说 jquery.crSpline 更多的是你可能首先想要的。

【解决方案2】：

我认为你应该试试 jQuery Easing 插件 - http://gsgd.co.uk/sandbox/jquery/easing/

包括文件，而不是“liner”添加一些其他缓动。

【讨论】：

【解决方案3】：

您描述的是速度变化吗？

这是因为动画的时间相同，但方块覆盖的距离不同。您可能需要根据行进的距离更改每个动画的时间。

【讨论】：

【解决方案4】：

这就是 jsfiddle 的问题.. 我测试了你的 jsfiddle 链接，但它看起来不像你在问题中提到的那样好。

但后来我在我的电脑上创建了新页面，并从你的小提琴中复制了所有内容并检查了它。看起来不错。

复制粘贴并保存为 html 并进行测试：

<html>
<head>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
    <style type="text/css">
    #point {
    position: absolute;
    background-color: black;
    width: 15px;
    height: 15px
}
    </style>
</head>
<body onload="initPage()">
    <div class="start" id="point"></div>
<script type="text/javascript">
    var json = [
                {'x' : '300' , 'y' : '200'},
                {'x' : '250' , 'y' : '150'},
                {'x' : '209' , 'y' : '387'},
                {'x' : '217' , 'y' : '323'},
                {'x' : '261' , 'y' : '278'},
                {'x' : '329' , 'y' : '269'},
                {'x' : '406' , 'y' : '295'}
            ];


function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        "linear");
    });
}
</script>
    </body>

</html>

【讨论】：

在 Windows 7 / Chrome 21 上测试 - 工作正常。小提琴中存在的问题现在已经消失了。