LayaBox做一个通用的提示弹窗

吕成鑫

已于 2024-03-21 17:53:29 修改

阅读量215

点赞数 6

分类专栏： LayaBox 文章标签：游戏引擎 javascript 前端

于 2024-03-21 17:49:13 首次发布

本文链接：https://blog.csdn.net/weixin_49511363/article/details/136915821

版权

LayaBox 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了两种JavaScript实现的弹窗提示功能，分别是Laya引擎中的`showTips`函数，用于创建可淡入淡出的3D效果提示，以及通用的Web版`showTip`函数，使用DOM操作创建并控制CSS样式显示简单的文本提示。

摘要由CSDN通过智能技术生成

function showTips(tipText, fontSize = 36, showTime = 2e3) {
    let arrTips = this._arrTips;
    let text;
    if (arrTips == null) {
        arrTips = [];
        let box = new Laya.Box();
        Laya.stage.addChild(box);
        box.zOrder = this._tipsZOrder;
        for (let index = 0; index < 3; index++) {
            let tipBox = new Laya.Box();
            tipBox.anchorX = tipBox.anchorY = .5;
            tipBox.centerX = 0;
            let bgBox = new Laya.Box();
            bgBox.bgColor = "#000000";
            bgBox.width = 800;
            bgBox.height = 80;
            bgBox.alpha = .7;
            tipBox.addChild(bgBox);
            text = new Laya.Text();
            tipBox.addChild(text);
            text.fontSize = fontSize;
            text.color = "#FFFFFF";
            text.width = 800;
            text.height = 50;
            text.y = 15;
            text.align = "center";
            text.valign = "middle";
            arrTips.push(text);
            box.addChild(tipBox);
            tipBox.visible = false;
        }
        this._arrTips = arrTips;
        box.width = 600;
        box.centerX = 0;
        box.centerY = -100;
    }
    if (arrTips.length == 0)
        return;
    text = arrTips.shift();
    text.text = tipText;
    text.wordWrap = true;
    text.color = "#FFFFFF";
    let time = showTime;
    let tipBox = text.parent;
    tipBox.visible = true;
    tipBox.scale(.8, .8);
    tipBox.alpha = 1;
    Laya.Tween.to(tipBox, {
        scaleX: 1,
        scaleY: 1
    }, 200, Laya.Ease.backOut, Laya.Handler.create(this, function (node) {
        Laya.timer.once(time - 600, this, function () {
            Laya.Tween.to(tipBox, {
                alpha: 0
            }, 400, null, Laya.Handler.create(this, function () {
                node.parent.visible = false;
                arrTips.push(node);
            }));
        });
    }, [text]));
}

还有一种是web通用的弹窗

function showTip(str) {
    const view = document.createElement("div");
    view.id = "tipView";
    document.body.appendChild(view);
    view.innerHTML = str;
    view.style.cssText = "position:absolute;top:30%;left:50%;margin-left:-150px;background:black;width:300px;height:40px;font-size:28px;color:white;opacity:0.8;z-index:999999999;text-align:center;"//位置样式自行调试
    setTimeout(() => {
        let opacity = 0.7;
        var timeId = setInterval(function () {
            opacity = opacity - 0.1;
            if (opacity <= 0) {
                clearInterval(timeId);
                view.remove();
            }
            view.style.opacity = opacity;
        }, 30);
    }, 400);
}