Cocos creator（JavaScript）滚动公告

使用Cocos creator（JavaScript）滚动公告

运行结果

主要代码

Notify.js

cc.Class({
    extends: cc.Component,

    properties: {
        richTextInfo: cc.RichText,
        speed: 200
    },

    /**
     * 组件脚本的初始化,可以操作this.node
     */
    onLoad() {
        console.log('初始化...');
        this.init({ name: '屌爆了', coin: 10000000 });
    },

    /**
     * 使用cc.instantiate()创建实例时
     * 通过getComponent(脚本名称)取得脚本实例
     * 然后使用init(data)来传递参数
     * @param {*} data 
     */
    init(data) {
        this.richTextInfo.string = this.initTemplate(data.name, data.coin);
        this._richTextLength = this.richTextInfo.node.width; 

        this._totalWidth = cc.director.getVisibleSize().width;

        this._startPosX = (this._totalWidth + this._richTextLength)/2;
        this._stopPosX = -(this._totalWidth + this._richTextLength)/2;

        this.richTextInfo.node.x = this._startPosX;
    },

    // 初始化模版
    initTemplate(name, coin) {
        let text = '恭喜<color=#00ff00> ' + name + ' </c>获取<color=#0fffff> ' + coin + ' </color>万金币';
        return text;
    },

    /**
     * 从o~1
     * @param {*} nowPoint 
     */
    easeExponentialIn(nowPoint, totalWidth) {
        let factor = (this._startPosX - nowPoint) / totalWidth; //(0,1)
        this.accel = factor === 0 ? 0 : Math.pow(2, 10 * (1 - factor)); // (0, 1024)
        //得到跟线性速度的差值
        this.xAccel = 1 - this.accel / 1024;
        this.xAccel = this.xAccel - factor;
        return 5 * (this.xAccel < 0 ? 0 : this.xAccel >= 1 ? 0 : this.xAccel);
    },

    /**
     * 结束
     */
    onFinish() {
        console.log('onFinish');
    },

    /**
     * 每一帧回调
     * @param {*} dt 
     */
    update(dt) {
        let moveX = this.easeExponentialIn(this.richTextInfo.node.x, this._totalWidth + this._richTextLength);
        console.log('moveX=', moveX);
        this.richTextInfo.node.x -= dt * this.speed + moveX;
        if (this.richTextInfo.node.x < this._stopPosX) {
            this.richTextInfo.node.x = this._startPosX;
            this.onFinish();
        }
    },

});

码云链接:https://gitee.com/ls_qq2670813470/Notify](https://gitee.com/ls_qq2670813470/Notify).
原文链接:https://blog.csdn.net/qq_14965517/article/details/104302286.