• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript 实现数字滚动

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

ui界面如下图所示:

代码如下:
 

const { ccclass, property } = cc._decorator;

 

@ccclass

export default class UIJackpotScrollNum extends UIPrefab {

 

    @property([cc.Node])

    content: cc.Node[] = [];

    @property

    speed: number = 10;

 

    private nowValue = [];                          //现在数字

    private startPos = 0;                           //开始位置

    private itemHeight = 0;                         //每个数字的高度

    private needMoveNum = 0;                        //需要变动的数字个数

    private successChangeNum = 0;                   //已经成功变动数字

    private setNumFish = false;                     //设置变更数字完成

    private scrollFishJackpotNum = 0;               //滚动完成还奖池显示数字

 

    onLoad() {

        this.itemHeight = this.content[0].height / 20;

        this.startPos = this.itemHeight * 0.5;

        this.setStartLocation(this.nowValue, this.content);

    }

    update() {

        if(this.setNumFish){

            if (this.needMoveNum == this.successChangeNum ) {

                this.successChangeNum = 0;

                DataService.getInstance().currJackpotShowNum = this.scrollFishJackpotNum;

                let tempJackpotData = DataService.getInstance();

               this.scrollFishJackpotNum =  tempJackpotData.currJackpotNum;

                if(tempJackpotData.currJackpotShowNum != tempJackpotData.currJackpotNum){

                        this.setValue(tempJackpotData.currJackpotNum, this.content);

                 }

            }          

        } 

    }

 

    //设置滚动数字

    protected setValue(value: number, contentNode: cc.Node[]): void {

        this.setNumFish = false;

        this.needMoveNum = 0;

        var temDate = this.getEachPosition(value);

        for (var i = 0; i < contentNode.length; i++) {

            if (temDate[i] != this.nowValue[i]) {

                this.needMoveNum++;

                this.rollingTo(temDate[i], contentNode[i], this.nowValue[i]);

                this.nowValue[i] = temDate[i];

            }

        }

        this.setNumFish = true;

}

    //设置文字初始位置

    public setStartLocation(num: number[], currentNode: cc.Node[]) {

        for (var i = 0; i < currentNode.length; i++) {

            currentNode[i].y = this.startPos + num[i] * this.itemHeight;

            this.nowValue.push(0);        

        }

        this.setNumFish = true;

    }

 

    //返回每个位置上的数字

    protected getEachPosition(num: number) {

        let temValue = num.toString();

        var temDate = [];

        for(var i = 0; i < this.content.length; i++){

            temDate.push(0);

        }

        for (var i = this.content.length - 1; i > -1; i--) {

            if (i < temValue.length) {

                temDate[temValue.length - 1 - i] = parseInt(temValue.slice(i, i + 1));

            } else {

                temDate[i] = 0;

            }

        }

        return temDate;

    }

    //数字滚动

    protected rollingTo(value: number, contentNode: cc.Node, currentNum: number): void {

        if (value < 0 || value > 9) {

            return;

        }

        value = currentNum > value ? value + 10 : value;

        var move_s = (value - currentNum) * this.itemHeight;

        var time = move_s / this.speed;

        var m = cc.moveTo(time, 0, contentNode.y + move_s);

        m.easing(cc.easeCubicActionOut());

        var endFunc = cc.callFunc(function () {

            if (value >= 10) {

                contentNode.y -= 10 * this.itemHeight;

            }

            this.successChangeNum++;

        }.bind(this));

        var seq = cc.sequence(m, endFunc);

        contentNode.runAction(seq);

    }

}

希望各位大神给点宝贵的意见!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
How to debug Typescript in browser发布时间:2022-07-18
下一篇:
reacthook+typescript+storybook搭建前端公共业务组件库发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap