html数字动画效果,原生JavaScript代码实现数字更新的动画效果

前言

在很多数据统计类型网站的首页，经常会看到数据在动态的更新，而且会以动画的效果呈现。

今天这篇文章我们就来看看这个效果如何实现吧。

文中的代码已经放到github上了，感兴趣的同学可以自取。https://github.com/zhouxiongking/article-pages/blob/master/articles/dynamicNumberUpdate/dynamicNumberUpdate.html

JavaScript

实现效果

首先我们来看看这个功能的实现效果，如下图所示。

实现效果

实现思路

看到上面的效果后，我们一起来如何实现？最开始给定一个基数，我们设置的是123456789。

给基数做基本的处理，每隔三位设置一个逗号。

随机生成从0到10之间的一个数，加到基数上，然后通过定时器，每隔一秒处理一次。

动画效果通过transform属性设置，transform的值改变translateY，从0%到-100%，这样就可以得到向上滚动的效果。

实现代码-JavaScript

页面的是初始HTML代码很简单，就只有一个空的ul元素。

首先是代码每隔三位加上逗号的方法。

方法1

其次是随机生成一个区间内数值的方法。

区间内随机生成数值

然后是增加step的方法。

增加step

然后是更新页面显示数字的方法。

该方法会接收两个参数，一个表示旧的数字，一个表示新的数字。然后比较新旧数字的每一位，如果相同则不需要变化，如果不同则需要添加一个active类，这个active类就是动画效果。

更新方法

最后是设置定时器，每秒触发一次update方法。

设置定时器

实现代码-CSS

给ul设置一个类number，然后给li设置基本属性，因为要呈水平排列，需要将display设置成inline-block。

基本属性

每个数字在初始状态下都是在translateY(0)的位置，表示旧数字，当数字有变化时，会增加动画效果使translateY从0%变为-100%，表示新数字。

新旧数字属性

最后是实际的动画属性。

动画属性

至此，所有的代码都讲解完毕，在页面运行后就可以达到文字一开始的效果。

结束语

这个效果也不只是这一种实现方法，大家还能想到别的方法吗?