为 jquery 动画添加轻松

Question

您好，我发现了这个动画，我想用它来给我的导航链接一个微小的、温和的随机运动，但它看起来不是很流畅。 http://jsfiddle.net/2TUFF/

(Random Movement in a Fixed Container)

    $(document).ready(function() {
    animateDiv();

});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window))
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv() {
    var $target = $('.a');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv();
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}​

我尝试过使用容器大小和速度，但这并没有太大帮助，我也尝试自己向 jquery 添加缓动，但我不知道如何掌握并失败了。

谢谢！

Answer 1

我相信您需要http://ijin.net/crSpline/demo.html 才能获得流畅的“微风”动画。

相关回答：how to smooth jquery animations

这是一个使用jQuery.crSpline的小提琴完整示例：

http://jsfiddle.net/2TUFF/295/