效果预览数组
▌滚动数字的效果预览，位数设置：10，初始值：0，测试时，把显示数字手动修改成 1234567890 的效果，#免费提供代码#，具体获取方法，参考文章结尾部分。微信
使用说明测试
▌建立一个空节点，给空节点添加本实例中的脚本 RollNumber 组件，还须要额外添加两个组件 Mask 组件和 Layout 组件，添加完效果，大体以下图所示，文字居中显示，节点当作正常节点进行使用便可。字体
▌Mask 组件主要用来控制数字的显示，Layout 用来控制多位数字的显示，Layout 须要设置成水平方向，Mode 须要设置成 Container 方式，设置以下图。flex
▌RollNumber 组件支持显示位数、运动速率的设置，使用时，须要设置每一位数字的显示宽度 width（注意不是全部位数的宽度），还须要设置 0-9 每一个数字的纹理图片，并对应上数组下标，以下图所示。
url
实现原理spa
▌具体的原理是，每一位一开始把 0-9-0 数字竖直方向拼接，都置于 Layout 组件内，从上到下排列，须要显示的区域经过遮罩显示，其余不须要显示部位就不会显示出来，当须要显示指定数字时，改变父节点的纵轴坐标实现须要的数字显示。
.net
▌上图就是去掉遮罩组件的显示效果，这样看更方便理解，其中绿色区域是显示区域，遮罩打开之后，玩家只会看到绿色区域范围。3d
▌运动分为两种：一种是数字从小到大，另一种是从大到小。
orm
▌数字从小到大，只须要获取到要运动到的位置，直接节点作 MoveTo 动做，让节点运动到指定数字便可。
▌数字从大到小，由于运动方向只有往上的，须要分三步：
1. 运动到最低端的 0 位置；
2. 总体下移，显示 0 ，这也是方便过渡，肉眼看不出变化效果；
3. 再 MoveTo 到指定的数字位置。
▌考虑到数字的长度可能会发生变化，使用节点池能够提高效率，须要的时候，从节点池获取，若是节点池是空的，从新生成。
▌数字运动的距离有长有短，计算运动时间时，须要根据偏移量计算运动时间，以达到每一位在相同时间内完成数字的变化。
获取代码
▌关注公众号，发送【滚动数字】获取代码，能够微信扫描下面二维码，关注本公众号，也能够点击开头处的蓝色字体进行关注。
往期精选
扫描二维码
获取更多精彩
一枚小工
让我知道你在看
本文分享自微信公众号 - 一枚小工（caizj_cn）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。