Skip to content

Instantly share code, notes, and snippets.

@DefectingCat
Last active May 8, 2024 03:38
Show Gist options
  • Save DefectingCat/ea4f4fc3a709f26b45d3d464ff1e928f to your computer and use it in GitHub Desktop.
Save DefectingCat/ea4f4fc3a709f26b45d3d464ff1e928f to your computer and use it in GitHub Desktop.
incraseNumber js javascript animation
/**
* 按间隔更新数字,数字增长的动画。
*
* @param start 动画开始的值
* @param end 动画最后结束的值
* @param updateFn 更新值状态的方法
* @param duration 动画总时长
* @param setpDuration 每次更新的间隔
* @param precision 数字精度
*
* 数字精度只会影响在动画时显示的值,不会影响最终值
*/
export function incraseNumber(
start = 0,
end: number,
updateFn: (state: number) => void,
duration = 500,
setpDuration = 25,
precision = 0
) {
const times = duration / setpDuration;
const step = end / times;
updateFn(start);
let count = 0;
const update = () => {
if (start < end) {
start += step;
updateFn(parseFloat(start.toFixed(precision)));
} else if (start > end) {
updateFn(end);
clearInterval(count);
} else {
clearInterval(count);
}
};
setTimeout(() => {
/** @ts-ignore */
count = setInterval(update, 25);
}, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment