先上效果图
demo.gif
思路
使用两张图片拼起来，数字就是
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 锚点来实现，具体实现可以自己尝试下
