数字文本的滚动显示效果如下：

image

步骤如下：

第一步：

新建个背景：用来显示数字的（此步略）；

第二步：

新建个空白Node，给Node添加Layout组件：

image

第三步：

给第二步的Node里面添加文本框，10个，从0到9：

image

第四步：

由第三步可以看出，我们只需要显示一个数字就好，所以我们给第二步的Node添加遮罩Mask组件：目的达成；

image

第五步：

设置数字，因为是测试，所以我直接写了个十以内的随机数生成，效果是文章最上面的gif。实现过程是修改10个数字文本框所在父节点的Y值，并用动画滚动。

onSetNum({num = 5}){
    //获取数字Label的个数
    let childCount = this.node_layout.getChildren().length;
    //求出单位y值
    let unit_y = this.node_layout.height / childCount;

    cc.tween(this.node_layout)
      .to(0.5, {position: cc.v2(this.node_layout.x, num * unit_y + unit_y / 2)}, {easing: "quadInOut"})
      .start();
  },

至此，基本效果完成了，但是这样还不能去直接展示我们的需求，我们可能有多位数，可能会有位数变化，下面来实现这些。

多位数的添加，就是用代码控制，将数字文本所在的node_layout做成预制体，然后添加或者销毁就好了。

代码如下：

/**
     * 设置数字
     * @param param0 node_bg是文本父节点的父节点，即有mask组件的节点，
     *               val是需要设置的数字的值（因为要比较位数，所以用的字符串）
     */
    setCoinOrPearl({ node_bg = null, val = "0" }) {
        //获取金币节点下子节点
        let arr_node_layout = node_bg.children;
        //计算金币的位数是不是等于显示的节点个数
        let sub_node_layout_num = val.length - arr_node_layout.length;
        //如果金币位数增大了
        if (sub_node_layout_num > 0) {
            for (let i = 0; i < sub_node_layout_num; ++i) {
                let node = cc.instantiate(this.node_layout);
                node.parent = node_bg;
            }
        } else if (sub_node_layout_num < 0) { //如果金币位数减少
            for (let i = sub_node_layout_num - 1; i > 0; --i) {
                node_bg[i].destroy();
            }
        }

        //获取每个layout的子节点的个数（一般是10）
        let childCount = arr_node_layout[0].children.length;
        //计算layout的单位高度
        let unit_y = arr_node_layout[0].height / childCount;
        //添加动画
        for (let i = 0; i < arr_node_layout.length; ++i) {
            let num = parseInt(val[i]);
            cc.tween(arr_node_layout[i])
                .to(0.5, { position: cc.v2(arr_node_layout[i].x, num * unit_y + unit_y / 2) }, { easing: "quadInOut" })
                .start();
        }
    };

效果如下：

GIF.gif

如有问题，请直接回复指出。