数字滚动组件

基于 anime.js 实现

anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。

安装

npm install animejs

组件代码

import React, { useEffect, forwardRef, useRef,useState} from 'react';
import anime  from 'animejs';
const Number = (props, ref) => {
    const dynamic = useRef(null);
    useEffect(() => {
        anime({
            targets: dynamic.current, 
            innerHTML: [0, props.number],
            easing: 'easeInOutExpo',
            round: 1
        });
    }, [props.number]);
    return (
        <span ref={dynamic}>
        </span>
    );
};
export default forwardRef(Number);

使用

<Number number={23222222222} />