如何用JavaScript制作一个数字逐步增加的动画效果？

本文共计1956个文字，预计阅读时间需要8分钟。

目录 + 背景 + 实现滚动效果，容器固定，数字向上滚动 + 使用两个元素实现滚动 + 利用H5的requestAnimationFrame() API实现数字逐增动画 + 计时器对比 + requestAnimationFrame实现滚动动画思考

目录

• 背景
• 实现类似滚轮的效果，容器固定，数字向上滚动
• 利用两个元素实现滚动
• 利用H5的requestAnimationFrame()API实现数字逐步递增的动画效果
• 计时器对比
• requestAnimationFrame实现滚动动画思路
• 成果展示

背景

可视化大屏项目使用最多的组件就是数字组件，展示数据的一个变化，为了提高视觉效果，需要给数字增加一个滚动效果，实现一个数字到另一个数字逐步递增的滚动动画。

先上一个思维导图：

实现类似滚轮的效果，容器固定，数字向上滚动

先列举所有的可能的值形成一个纵向的列表，然后固定一个容器，匀速更改数字的偏移值。