같은 속도로 애니메이션을 정지하고 재생하면 결과가 느려집니다.

Question

현재 루프 애니메이션에는 하나의 무한 루프 애니메이션이 있습니다. 회전하는 초밥처럼 box1, box2, box3과 같은 루프의 일부 요소입니다. 상자를 클릭하면 정보가 팝업되고 애니메이션이 중지되며 4 초 후에 다시 활성화됩니다.

하지만 지금 직면하는 문제는 4 초가 지나면 애니메이션 속도가 매우 느려지므로 속도가 느려집니다. 내 코드는 다음과 같습니다.

jsFiddle here

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

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, (재) 애니메이션을 시작, 당신은 설정할 수있는보다 직선 운동에 대한 easinglinear에 : fiddle