走着走着,就让数字跳起来了。最近项目中看到一个比较好看的数字滚动效果,就模仿做了一个。

还做了一些扩展。比如数字滚动方向,数字滚动速度。 最终目的:传入一个参数(是数字可以是数字的字符串或数字),然后滚到对用的数字。

细节:数字大小,颜色,字体,方向,数字的位数,数字滚动的速度,数字滚动的方向,数字的滤镜,滚动时的缓动。并,可以动态的设置这些参数。

要求:数字在垂直方向上滚动,滚动到对应的数字。

创组件:建立第一个Label对象,就是滚动的对象。这里用TextField,将0,1-9,垂直的,等间距的排在一起。本来,想用一个TextField,结果会引起间隔不均匀,移动会出现错位。所以会创建一系列的数字。
对滚动的方向,创建的数目有所不同。没有方向限制的,创建从0-9的就可以。从上到下或从下到上,需要至少创建两组数字。所以,就创建两组这样的数字。
再建立一个Direction对象,用来枚举滚动方向的。
再建立一个Mode对象,用类枚举滚动速度类型。大范围匀速,还是大范围变速。
再建立一个RollLabel对象,将label组合进来。记录当前的num,默认是0,要滚动到的num。时间。然后,找规律,写算法,找到time和坐标。滚动到就可以了。
再建立一个RollNumText对象,组合RollLabel。想做几位数字的,就组合几个RollLabel进来。
最后,创建一个文档类,来创建三种不同的RollNumText。一般,构造器函数中会带一些关键性熟悉。比如几位数字的,什么方向的,速度类型的。

有一点需要注意。比如,我们创建一个8位数字的滚动,如果传进来的数字是5位(也就是小于8位)的数字,想要滚动的好。就得对数字进行反转。这样,可以不用补位,相对代码也好写。

请看demo,new出了三个滚动方向的RollNumText:
http://www.vini123.com/demo/rollNumText.swf