Question

嗨我发现这个动画，我想用它来给我的导航链接一个微小，温和的随机动作，但它看起来不是很平滑。 http://jsfiddle.net/2TUFF/

    $(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才能获得顺畅的微风＆＃34;动画。

相关答案：how to smooth jquery animations

以下是使用jQuery.crSpline小提琴的完整示例：

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

为jquery动画添加简易性

1 个答案: