前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
背景
平时浏览一些跟数字有关的网页的时候，可能你会发现数字并不是直接从 0 变成 99999 的，这样会很生硬，而是会有一个从 0 增长到 99999 的动画效果，如下图
那这个效果要怎么实现呢？其实挺简单的，也挺有趣的，继续往下看吧~
useNumberAnimation
我们创建一个文件 use-number-animation.ts 来写这个 hooks
确定参数
首先来确定这个函数需要接受什么参数：
- **from：**起始数字
- **to：**最终数字
- **duration：**动画延迟间隔
- **onProgress：**增长回调函数
requestAnimationFrame
可以看到数字是在不停变化的，所以我们需要有一个定时任务去让这个数字一直变化才行，那么用 setInterval 吗？不是的，显然用 requestAnimationFrame 性能会更佳，它会在浏览器下一帧重绘之前执行~
增长速度
可以看到数字在不断增长，那么既然是增长，就需要计算增长速度，增长速度要怎么算呢？
假设我要用3000ms的时间去从0增长到378291.668，那增长速度是不是 (378291.668 - 0) / 3000呢？
由此我们可以知道增长速度 speed = (to - from) / duration;
啥时候终止增长？
啥时候终止增长呢？其实很简单，那就是从开始增长开始，经过的时间大于 duration 时，就终止，这个时候说明动画必须要结束的~
最终代码
可以得出最终的代码为
使用方式如下
最终达到数字增长的动画效果~
结语 & 加学习群 & 摸鱼群
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
- 一个偏前端的全干工程师；
- 一个不正经的掘金作者；
- 一个逗比的B站up主；
- 一个不帅的小红书博主；
- 一个喜欢打铁的篮球菜鸟；
- 一个喜欢历史的乏味少年；
- 一个喜欢rap的五音不全弱鸡
如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点