这篇文章来源于之前的一个活动需求，有一个动画效果是数字跳动递增，但是这个数字不能是文本，而是0-9的10张图片，所以组件库中的文本数字跳动是不能直接用了，就不得不重新写一个，在递增的基础上又增加了递减的动画，实际效果是这样的：
不好截图想象一下吧。：）
最开始我是用 setInterval 写的，只有递增动画，没有递减动画，而且动画很卡顿，需要在数字跳动到某一个数字的时候更换成图片，而且这些图片会在数字频繁的变化后去请求图片，然后再取消请求，性能很差，至于原因可以看 mdn 上 setInterval 的介绍：
setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。这个延迟的时间并不一定是设置的时间，实际的延迟时间会稍微长一点。而且图片的请求和取消请求对性能影响也很差所有就考虑将图片转化成 base64 来做，性能有很大的提升，接下来一步步实现优化吧。
动画优化
requestAnimationFrame() 是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()。
回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的