前言
最近看到字节流量官网，想要仿照自己写一个数字跳动的效果，虽然自己也可以用定时器实现，但是比较麻烦，想了想去网上找相关的轮子，这里整理出来方便后面的同学使用，如果对你有帮助的话，可以点个赞鼓励一下我嘛哈哈哈。
要实现的效果我放在这里了：
数字滚动插件
use-animate-number
-
下载：
npm i use-animate-number -
引入：
import useAnimateNumber from 'use-animate-number'; -
使用：
- 调用setValue就会产生动画效果，在调用setValue可以临时传递参数
const Component = () => {
const options = {
duration: 1000,
enterance: true,
direct: false,
disabled: false,
decimals: 2;
}
const [value, setValue] = useAnimateNumber(0, options)
// 或者直接写进去
const [click, setClick] = useAnimateNumber(0, {decimals: 0})
return <span>value</span>
}
// demo
const [value, setValue] = useAnimateNumber(0);
setCurrentValue(0, true); // It will instantly set the value as 0 in no time
-
参数详解：
Name Type Default Description duration number 1000 数字滚动时长 enterance boolean true 从零开始滚动 direct boolean false 如果不需要额外的逻辑，可以通过设置direct选项忽略使用update函数 disabled boolean false 禁止使用动画 decimals number 2 小数位长度
