44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
function animate(element, end, dezimal = 0) {
|
|
var duration = 500;
|
|
var element = document.getElementById(element);
|
|
|
|
const startTime = performance.now();
|
|
|
|
// Cubic easing function: slows down at the start and end
|
|
const easeInOutCubic = (t) =>
|
|
t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
|
|
const updateCount = (currentTime) => {
|
|
const elapsedTime = currentTime - startTime;
|
|
let progress = elapsedTime / duration;
|
|
|
|
// Clamp progress to ensure it doesn't overshoot
|
|
if (progress > 1) progress = 1;
|
|
|
|
// Apply easing curve to progress
|
|
const easedProgress = easeInOutCubic(progress);
|
|
|
|
// Calculate current value and round to integer
|
|
const currentCount = Math.round(end * easedProgress * 100) / 100;
|
|
|
|
switch (dezimal) {
|
|
case 1:
|
|
element.innerHTML = currentCount.toFixed(1);
|
|
break;
|
|
case 2:
|
|
element.innerHTML = currentCount.toFixed(2);
|
|
break;
|
|
|
|
default:
|
|
element.innerHTML = currentCount;
|
|
break;
|
|
}
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(updateCount);
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(updateCount);
|
|
}
|