前言
在很多数据统计类型网站的首页,经常会看到数据在动态的更新,而且会以动画的效果呈现。
今天这篇文章我们就来看看这个效果如何实现吧。
文中的代码已经放到github上了,感兴趣的同学可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dynamicNumberUpdate/dynamicNumberUpdate.html
实现效果
首先我们来看看这个功能的实现效果,如下图所示。
实现思路
看到上面的效果后,我们一起来如何实现?
最开始给定一个基数,我们设置的是123456789。
给基数做基本的处理,每隔三位设置一个逗号。
随机生成从0到10之间的一个数,加到基数上,然后通过定时器,每隔一秒处理一次。
动画效果通过transform属性设置,transform的值改变translateY,从0%到-100%,这样就可以得到向上滚动的效果。
实现代码-JavaScript
页面的是初始HTML代码很简单,就只有一个空的ul元素。
首先是代码每隔三位加上逗号的方法。
其次是随机生成一个区间内数值的方法。
然后是增加step的方法。
然后是更新页面显示数字的方法。
该方法会接收两个参数,一个表示旧的数字,一个表示新的数字。然后比较新旧数字的每一位,如果相同则不需要变化,如果不同则需要添加一个active类,这个active类就是动画效果。
最后是设置定时器,每秒触发一次update方法。
实现代码-CSS
给ul设置一个类number,然后给li设置基本属性,因为要呈水平排列,需要将display设置成inline-block。
每个数字在初始状态下都是在translateY(0)的位置,表示旧数字,当数字有变化时,会增加动画效果使translateY从0%变为-100%,表示新数字。
最后是实际的动画属性。
至此,所有的代码都讲解完毕,在页面运行后就可以达到文字一开始的效果。
结束语
这个效果也不只是这一种实现方法,大家还能想到别的方法吗?