先上效果圖

demo.gif

源碼已上傳github
源碼已上傳gitee

思路

使用兩張圖片拼起來，數(shù)字就是
0、1、2、3、4、5、6、7、8、9、0、1、2、3、4、5、6、7、8、9
1.使用偏移量移動化的方式往上偏移
2.當(dāng)偏移的數(shù)字大于上次的數(shù)組就正常偏移
3.第二次數(shù)字小于上次的數(shù)字，就要持續(xù)往上偏移到指定數(shù)字
4.之后再把偏移的位置設(shè)置到最初的位置上

目前是一直往上滾動切換數(shù)字

實現(xiàn)

利用 transform 的 translateY 偏移和 transition 動畫來實現(xiàn)

具體實現(xiàn)

代碼中注釋很清楚，不懂的可以評論區(qū)或者私信我

截屏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>
  )
}

更多閱讀

還有一種實現(xiàn)方式是使用
transform: transationY + background-position 錨點來實現(xiàn)，具體實現(xiàn)可以自己嘗試下