업데이트 간격을 늘리거나 jQuery의 .animate() 메소드의 단계 수를 줄이는 방법은 무엇입니까?

Question

jQuery로 애니메이션 작업하는 것은 간단합니다. 여기에 0 1000 2 초 이상에 번호를 애니메이션의 예

var $h1 = $('h1'), 
    startValue = parseInt($h1.text(), 10), 
    endValue = parseInt($h1.data('end-value'), 10); 
$({ int: startValue }) 
    .animate({ 
    int: endValue 
    }, { 
    duration: 2 * 1000, 
    step: function() { 
     $h1.text(Math.ceil(this.int)); 
    } 
    }); 

근무 예 : http://codepen.io/troywarr/pen/NpjyJE?editors=1010#0

이 애니메이션은 좋은 보이지만 어려운 중 어느 시점에 수를 읽을 수 있습니다 다음 숫자는 밀리 초 단위로 바뀝니다. 이상적으로, 나는 같은 시간 길이에 걸쳐 번호를 움직이기는하지만, 업데이트 간격의 길이를 늘이는 더 적은 단계를 사용하여 숫자를 애니메이션으로 볼 때 더 쉽게 읽을 수 있도록하고 싶습니다.

jQuery가 애니메이션의 단계 수나 업데이트 간격을 직접 제어 할 수있는 것은 아닙니다. 보간 값을받는 step function 만 허용하는 것으로 보입니다.

jQuery가 해당 기간 동안 애니메이션을 보간하는 데 사용하는 단계 수를 조정하는 방법이 있습니까?

Answer 1

여기서는 이것을 시뮬레이트하는 데 사용한 방법이 있습니다. 이는 일상적인 용도로는 충분할 것입니다. 하지만 jQuery는 여전히 원래의 숫자와 동일한 횟수만큼 step 함수를 호출하기 때문에 이는 성능 측면에서 이상적인 것은 아닙니다.

var $h1 = $('h1'), 
    startValue = parseInt($h1.text(), 10), 
    endValue = parseInt($h1.data('end-value'), 10), 
    stepCounter = 0, 
    showNthStep = 8; 
$({ int: startValue }) 
    .animate({ 
    int: endValue 
    }, { 
    duration: 2 * 1000, 
    step: function() { 
     if (stepCounter++ === showNthStep) { 
     $h1.text(Math.ceil(this.int));   
     stepCounter = 0; 
     } 
    }, 
    complete: function() { 
     $h1.text(Math.ceil(this.int));   
    } 
    }); 

근무 예 : http://codepen.io/troywarr/pen/NpjYWo?editors=1010#0

이것은 step 함수 호출을 계산 만 (showNthStep 당) 수마다 8 시간을 업데이트 할 변수 stepCounter을 사용합니다.

step 함수를 8 배수로 호출하지 않으면 complete 함수가 마지막으로 숫자를 업데이트해야합니다.