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

这是另一个简化版本。当动画几乎结束时，当我点击停止我并再次启动我时，动画变得极慢，我知道tat是一个持续时间问题。任何人都知道如何解决这个问题？

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，对于（重新）开始动画时的更线性动作，您可以将easing设置为linear：fiddle

停止和重放动画获得相同的速度导致结果看起来很慢

1 个答案: