jquery - 停止并重播动画以相同的速度导致结果看起来很慢

Question

目前我有一个无限循环动画，这是循环上的一些元素，例如 box1、box2、box3，类似于旋转寿司。当我点击该框时，它会弹出一些信息并停止动画，4 秒后它会再次重新启动。

但我现在面临的问题是，在 4 秒后重新启动时，由于动画持续时间，速度看起来非常慢。这是我的代码。

var timeoutBox;

$('.sushi_box').on('click', function(){

    $('.sushi_item').removeClass('active');
    $(this).parent().addClass('active');
    // here another code for stop the sushi roll.

    $('.total_roll').clearQueue().stop();

    // after 4 sec hide box;
    clearTimeout(timeoutBox);
    timeoutBox = setTimeout(function(){
        $('.sushi_item').removeClass('active');
        // here another code for reanimate the sushi roll.

        animateLoop();

    }, 4000)

})

function animateLoop(){

    var originWidth = $('.sushi_roll.origin').outerWidth(true);

    $('.total_roll').animate({ "left": -originWidth }, {
        easing:"linear", 
        duration:5000,
        complete: function(){

            $('.total_roll').css({ "left": 0});

            originNumber++;

            console.log(originNumber);

            if(originNumber == 1){

                console.log(1);
                var origin = $('.sushi_roll.origin').html();

                $('.sushi_roll.origin').remove();

                $('.total_roll').append('<div class="sushi_roll origin">'+origin+'</div>');

                var $sushiWidth   = $('.sushi_roll .sushi_item').outerWidth(true);
                var $sushiHeight  = $('.sushi_item').outerHeight(true);

                var $sushiOrginLength  = $('.sushi_roll.origin .sushi_item').length;
                var $sushiCloneLength  = $('.sushi_roll.clone .sushi_item').length;

                $('.sushi_roll.origin').css({ 
                    "width"  : $sushiOrginLength*$sushiWidth,
                    "height" : $sushiHeight 
                });

            } else if(originNumber == 2){

                console.log(2);
                var clone = $('.sushi_roll.clone').html();

                $('.sushi_roll.clone').remove();

                $('.total_roll').append('<div class="sushi_roll clone">'+clone+'</div>');

                var $sushiWidth   = $('.sushi_roll .sushi_item').outerWidth(true);
                var $sushiHeight  = $('.sushi_item').outerHeight(true);

                var $sushiOrginLength  = $('.sushi_roll.origin .sushi_item').length;
                var $sushiCloneLength  = $('.sushi_roll.clone .sushi_item').length;

                $('.sushi_roll.clone').css({ 
                    "width"  : $sushiOrginLength*$sushiWidth,
                    "height" : $sushiHeight 
                });
            }

            if(originNumber>=2){
                originNumber=0;
            }

            animateLoop();

        }

    });
}



 animateLoop();

jsFiddle here

这是另一个简化版本。当动画快结束时，当我单击停止并再次启动时，动画变得非常慢，我知道这是一个持续时间问题。有人知道如何解决这个问题吗？

jsFiddle here

Answer 1

正如您所提到的，问题是达到目标的持续时间是 3 秒。这意味着，盒子离目标越近，它的速度就越慢。

一种解决方法是根据剩余距离设置持续时间。使用第二个示例:

var $box = $('.box');
var target = 300, defaultDuration = 3000, startX = $box.position().left;

function animateLoop(duration){
    var x = $box.position().left - startX;
  var duration = ((target - x) / target ) * defaultDuration; 
    $box.animate({ "left": 300}, {
    duration:duration,
    complete: function(){
        $box.css({'left':0});
        animateLoop();    } 
   });
}

Fiddle

PS，为了在(重新)启动动画时获得更线性的运动，您可以将缓动设置为线性:fiddle