React 数字滑动器

先上效果图

demo.gif

源码已上传github
源码已上传gitee

思路

使用两张图片拼起来，数字就是
0、1、2、3、4、5、6、7、8、9、0、1、2、3、4、5、6、7、8、9
1.使用偏移量移动化的方式往上偏移
2.当偏移的数字大于上次的数组就正常偏移
3.第二次数字小于上次的数字，就要持续往上偏移到指定数字
4.之后再把偏移的位置设置到最初的位置上

目前是一直往上滚动切换数字

实现

利用 transform 的 translateY 偏移和 transition 动画来实现

具体实现

代码中注释很清楚，不懂的可以评论区或者私信我

截屏2021-06-28 下午12.29.56.png

使用方法

目前组件已单独封装成组件使用时：

import { Draw } from './components'
export const App: React.FC = () => {
  const [numberList, setNumberList] = useState([1, 2, 3, 4, 5, 6])
  useEffect(() => {
    setInterval(() => {
      console.log('-------')
      setNumberList([
        rand(10),
        rand(10),
        rand(10),
        rand(10),
        rand(10),
        rand(10),
      ])
    }, 2000)
  }, [])
  function rand(n) {
    return Math.floor(Math.random() * n)
  }

  return (
    <div className={styles.App}>
      <header className={styles['App-header']}>
        <img src={logo} className={styles['App-logo']} alt="logo" />
        <div className={styles['draw-bg']}>
          {numberList.map((res) => {
            return <Draw count={res} />
          })}
        </div>
      </header>
    </div>
  )
}

更多阅读

还有一种实现方式是使用
transform: transationY + background-position 锚点来实现，具体实现可以自己尝试下