高阶函数封装js动画

我们在生活中肯定看到过这样的场景，在我们进入页面或者刷新页面的时候数字(金额)会从高到低的一个动画效果；那么这是怎么做的呢？最开始的时候我以为是用css3来做的；后来看了别人的教程才发现，原来是用js写的；我没有完全按照教程的来，我用到的是Hz为60来计算的，教程是根据时间；大致思路是差不多的

需求分析

既然我们知道是用JS来做的，那么肯定是去变化数字了；既然我们要做到这几点，那么肯定是需要封装一些参数的

• 时间 duration：指在此动画期间的一个事件间隔
• from 起始值：值我们从某一个值开始动画
• to 目标值：值这是我们最终的一个值
• onProgress 回调函数：每次得到值以后的一个回调，便于得到数据渲染

注意：

这儿用到了window.requestAnimationFrame方法，然后在其中回调函数执行次数通常是每秒 60 次；下面代码中用到了此逻辑

代码分析

• 将duration(毫秒)转为秒
• 由于requestAnimationFrame有60Hz(每秒执行60次)，所以将秒乘60并取整就可以得到每秒执行多少次
• 然后dis计算出起始值和目标值差值多少
• 差值除以每秒执行多少次，也就得到了步长
• 在每次执行动画的时候都将得到的步长和初始值相加即可
• 最后就是根据相对于的条件停止即可

模仿写法

```javascript