效果预览
▌滚动数字的效果预览，位数设置：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 到指定的数字位置。
▌考虑到数字的长度可能会发生变化，使用节点池可以提升效率，需要的时候，从节点池获取，如果节点池是空的，重新生成。
▌数字运动的距离有长有短，计算运动时间时，需要根据偏移量计算运动时间，以达到每一位在相同时间内完成数字的变化。
获取代码
▌关注公众号，发送【滚动数字】获取代码，可以微信扫描下面二维码，关注本公众号，也可以点击开头处的蓝色字体进行关注。
往期精选
扫描二维码
获取更多精彩
一枚小工
让我知道你在看
扫一扫
1657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
