▌滚动数字的效果预览,位数设置:10,初始值:0,测试时,把显示数字手动修改为 1234567890 的效果,#免费提供代码#,具体获取方法,参考文章结尾部分。
使用说明
▌创建一个空节点,给空节点添加本实例中的脚本 RollNumber 组件,还需要额外添加两个组件 Mask 组件和 Layout 组件,添加完效果,大致如下图所示,文字居中显示,节点当做正常节点进行使用即可。
▌Mask 组件主要用来控制数字的显示,Layout 用来控制多位数字的显示,Layout 需要设置成水平方向,Mode 需要设置成 Container 方式,设置如下图。
▌RollNumber 组件支持显示位数、运动速率的设置,使用时,需要设置每一位数字的显示宽度 width(注意不是所有位数的宽度),还需要设置 0-9 每个数字的纹理图片,并对应上数组下标,如下图所示。
实现原理
▌具体的原理是,每一位一开始把 0-9-0 数字竖直方向拼接,都置于 Layout 组件内,从上到下排列,需要显示的区域通过遮罩显示,其他不需要显示部位就不会显示出来,当需要显示指定数字时,改变父节点的纵轴坐标实现需要的数字显示。
▌上图就是去掉遮罩组件的显示效果,这样看更方便理解,其中绿色区域是显示区域,遮罩打开以后,玩家只会看到绿色区域范围。
▌运动分为两种:一种是数字从小到大,另外一种是从大到小。
▌数字从小到大,只需要获取到要运动到的位置,直接节点做 MoveTo 动作,让节点运动到指定数字即可。
▌数字从大到小,因为运动方向只有往上的,需要分三步:
1. 运动到最低端的 0 位置;
2. 整体下移,显示 0 ,这也是方便过渡,肉眼看不出变化效果;
3. 再 MoveTo 到指定的数字位置。
▌考虑到数字的长度可能会发生变化,使用节点池可以提升效率,需要的时候,从节点池获取,如果节点池是空的,重新生成。
▌数字运动的距离有长有短,计算运动时间时,需要根据偏移量计算运动时间,以达到每一位在相同时间内完成数字的变化。