在react中使用的数字滚动组件

原创

挥刀北上

修改于 2021-02-25 18:05:40

4.2K0

修改于 2021-02-25 18:05:40

文章被收录于专栏：Node.js开发

今天介绍一个数字滚动插件，use-animate-number，使用方法为：

const Component = () => {

const options = {
  duration: 1000,
  enterance: true,
  direct: false,
  disabled: false,
  decimals: 2;
}
  const [value, setValue] = useAnimateNumber(0, options)
  return <span>value</span>
}

调用setValue就会产生动画效果。在调用setValue时可以临时传递参数，如：

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	小数位长度