[]分享一个自己做的游戏公告功能，跑马灯效果

import View = Laya.View

import Image = Laya.Image

import HTMLDivElement = Laya.HTMLDivElement

import Sprite = Laya.Sprite

import Box = Laya.Box

/** 公告栏 */

export default class Notice extends View {



    /** 滚动区域 */

    hornBox: Box

    

    /** html对象 */

    html: HTMLDivElement



    /** 滚动框的宽度 */

    defaultX = 1110



    /** 动画是否出于播放状态 */

    isPlayIng:boolean = false



    /** 空格 */

    private space:string = "<span>                          </span>"



    constructor() {

        super()



        this.width = 1200

        this.height = 55

        this.visible = false

        this.pos(565,150)

        this._createHorn()

        this._createBg()

        this._createView()

        this.on(Laya.Event.UNDISPLAY,this,this.stop)

        this.on(Laya.Event.DISPLAY,this,this.play)

    }



    /** 创建滚动区域 */

    _createView() {

        this.hornBox = new Box()

        let _rectangle = new Laya.Rectangle(0,0,this.defaultX,55)

        this.hornBox.scrollRect = _rectangle

        this.hornBox.height = 55

        this.hornBox.pos(70,0)

        this.hornBox.zOrder = 3

        this.html = new HTMLDivElement()

        this.html.x = this.defaultX

        this.html.contextHeight = 55

        this.html.contextWidth = 1180

		this.html.style.fontSize = 34

        this.html.style.wordWrap = false

        this.html.style.lineHeight = 55

        this.html.style.align = "left"

        this.html.style.color = "#fff"

		this.html.innerHTML = ""

        this.hornBox.addChild(this.html)

        this.addChild(this.hornBox)

        

    }



    /** 滚动动画 */

    private _animate(e: Event): void {

        const _w = this.html.width

        const _x = this.html.x

        if (_x < -_w) {

            this.stop(true)

        } else {

            this.html.x -= 2

        }

    }



    /** 添加节点 */

    addItem(html:string) {

        if (typeof html === "undefined") {return }

        this.html.appendHTML(`${this.space}${html}`)

        if (this.isPlayIng === false) {

            this.play()

            this.isPlayIng = true

        }

    }



    /** 开始动画 */

    play() {

        

        if (this.isPlayIng === true) {

            return

        }

        const _w = this.html.width

        const _x = this.html.x

        if (_w === 0) {

            return

        }

        if (_x < -_w) {

            return

        }

        this.visible = true

        this.frameLoop(1, this, this._animate)

    }



    /** 停止播放 */

    stop(type?:boolean) {

        this.isPlayIng = false

        this.visible = false

        this.clearTimer(this,this._animate)

        if (type === true) {

            this.html.x = this.defaultX

            this.html.innerHTML = ""

        }

    }



    /** 创建背景 */

    _createBg() {

        let bg = new Image()

        bg.skin = 'common/bg.png'

        bg.pos(20,0)

        bg.width = 1180

        bg.height = 55

        bg.sizeGrid = "2,2,2,2"

        bg.alpha = 0.7

        bg.zOrder = 1

        this.addChild(bg)

    }



    /** 创建喇叭 */

    _createHorn(){

        let horn = new Image()

        horn.zOrder = 2

        horn.loadImage('common/horn.png',-12,-12)

        this.addChild(horn)

    }





}