用Laya制作簡單的動畫。我這是臨時救火的需求,你說刺激不刺激


(function () {
    var layaGameInit = window.layaGameInit || {};
    var WebGL = Laya.WebGL;
    var Browser = Laya.Browser;
    Config.isAlpha = true;
    Laya.init(750, 1100, WebGL);
    Laya.stage.scaleMode = "showall";
    Laya.stage.alignV = "middle";
    Laya.stage.alignH = "center";

    //設置背景顏色為none
    Laya.stage.bgColor = "none";

    //動畫執行
    layaGameInit.init = function (starMoney, endMoney, multiple, callback) {
        Laya.stage.destroyChildren();//銷毀
        $('#layaContainer').show();
        var Sprite = Laya.Sprite;
        var Templet = Laya.Templet;
        var Event = Laya.Event;
        var Browser = Laya.Browser;
        var Stage = Laya.Stage;
        //文本庫
        var Text = Laya.Text;
        //判斷有沒有主動刪除
        var timeoutFun = null;

        (function () {


            var fontText = 'PingFangSC-Medium, sans-serif';
            var moneyFont = 'Arial,Helvetica,STHeiTi,sans-serif';
            // //文本動畫的庫
            var Ease = Laya.Ease;
            var Tween = Laya.Tween;
            var text = new Text();
            var moneyTxt = new Text();
            var text1 = new Text();
            var text2 = new Text();
            var loopFlag = true;
            var mAniPath;
            var mStartX = Browser.clientWidth;
            var mStartY = Browser.clientHeight;
            var mFactory;
            var mCurrIndex = 0;
            var mArmature;

            var button1;
            startFun();

            function startFun() {

                
                //這是動畫
                mAniPath = "./assets/game/ss.sk";
                mFactory = new Templet();
                mFactory.on(Event.COMPLETE, this, parseComplete);
                mFactory.on(Event.ERROR, this, onError);
                mFactory.loadAni(mAniPath);


                //這個是添加文本
                setTimeout(function () {
                    var _title = new Text();
                    _title.overflow = Text.HIDDEN;
                    _title.color = "#d2363b";
                    _title.font = fontText;
                    _title.fontSize = 35;
                    _title.width = 750;
                    _title.align = 'center';
                    _title.y = 450;

                    //這是加的文本
                    // var text = new Text();
                    text.overflow = Text.HIDDEN;
                    // text.color = "#d2363b";
                    text.color = "#d2363b";
                    text.font = moneyFont;
                    text.fontSize = 108;
                    text.y = 575;
                    text.text = starMoney + '';

                    moneyTxt.overflow = Text.HIDDEN;
                    moneyTxt.color = "#d2363b";
                    moneyTxt.font = moneyFont;
                    moneyTxt.fontSize = 36;
                    moneyTxt.y = 630;
                    moneyTxt.text = 'ss';

                    console.log(moneyTxt,text)
                    Laya.stage.addChild(moneyTxt);
                    Laya.stage.addChild(text);

                    text.x = (750-text.width)/2;
                    moneyTxt.x = (750-text.width)/2-30;


                    //定時消除第一次的數字
                    setTimeout(function () {

                        Laya.stage.removeChild(_title);
                        Laya.stage.removeChild(sssText);
                        Laya.stage.removeChild(text);
                    }, 1400)
                }, 1000);
            }

            function onDecreaseAlpha1() {
                if(timeoutFun){
                    clearTimeout(timeoutFun);
                }
                //關閉
                $('#layaContainer').css('display', 'none');
                //執行關閉回調
                callback();
            }

            function createButton(label) {
                var w = 50,
                    h = 50;
               
                var buttonSkin = './assets/openRedPacket/icon-close.png';
                
                var button = new Sprite();
                button.loadImage(buttonSkin, 0, 0, w, h);//直接定義roleImg的大小及相對位置
                // button.graphics.drawRect(0, 0, w, h, "#FF7F50");
                button.size(w, h);
                // button.graphics.fillText(label, w / 2, 17, "20px simHei", "#ffffff", "center");
                return button;
            }

            function createTween(endMoney) {
                var demoString1 = '¥' + endMoney;
                let _txtArray = [];
                //文字總寬度
                let _txtWidth = 0;
                for (var i=0 ; i<demoString1.length; i++) {
                    let _text = createLetter1(demoString1.charAt(i));
                    //計算文字總寬度
                    _txtWidth = _txtWidth + _text.width;
                    _txtArray.push(_text);
                }

                //文本創建時的起始x位置(>>在此使用右移運算符,相當於/2 用>>效率更高)
                var offsetX1 = (Laya.stage.width - _txtWidth) / 2;
                //顯示的字符串

                let _posX= offsetX1;
                //根據"LayaBox"字符串長度創建單個字符,並對每個單獨字符使用緩動動畫
                for (var i = 0;  i < _txtArray.length; i++) {
                    let letterText1 =_txtArray[i];
                    if(i===0){
                        letterText1.x = _posX-15;
                    }else{
                        letterText1.x = _posX;
                    }
                    letterText1.align = 'center';
                    /**
                     //文本的初始y屬性
                     letterText1.y = 100;
                     /**
                     * 對象letterText屬性y從100緩動到300的位置
                     * 用1000毫秒完成緩動效果
                     * 緩動類型采用bounceIn
                     * 單個字符的緩動效果結束后,使用changeColor回調函數將字符改變為紅色
                     * 延遲間隔i*100毫秒執行
                     */
                    Tween.to(letterText1, {
                        align: 'center',
                        y: demoString1.charAt(i)=='¥' ? 375 : 325  //文字高度
                    }, 700, Ease.bounceIn, Laya.Handler.create(this, changeColor1, [letterText1]), i * 100);
                    _posX = _posX +letterText1.width;
                }

                
                boomArgs()


            }

            function showGongXi() {
                text2.overflow = Text.HIDDEN;
                text2.color = "#d2363b";
                text2.font = fontText;
                text2.fontSize = 35;
                text2.width = 750;
                text2.align = 'center';
                text2.y = 240;
                Laya.stage.addChild(text2);
                text2.text = 'ssssText';
            }

            
            function boomArgs() {
                text1.overflow = Text.HIDDEN;
                text1.color = "#ffffff";
                text1.font = fontText;
                text1.fontSize = 42;
                text1.width = 750;
                text1.align = 'center';
                text1.text = 'ssssText';
                let bgBox = new Laya.Sprite();
                bgBox.width = 100;
                bgBox.align = 'center';
                bgBox.x = 90;
                bgBox.y = 880;
                bgBox.pivotX = 0;
                bgBox.pivotY = 0;
                bgBox.rotation = -19;
                bgBox.addChild(text1);
                Laya.stage.addChild(bgBox);
            }

            //緩動改顏色
            function changeColor1(txt) {
                //將文本字體改變成紅色
                txt.color = "#d2363b";
            }

            //文字緩緩動
            function createLetter1(char) {
                //文字動畫
                var letter = new Text();
                letter.text = char;
                letter.color = "transparent";
                letter.font = moneyFont;
                if('¥'==char){
                    letter.fontSize = 42;
                }else{
                    letter.fontSize = 108;
                }
                Laya.stage.addChild(letter);
                return letter;
            }


            function onError() {
                trace("error");
            }

            function parseComplete() {
                //創建模式為1,可以啟用換裝
                mArmature = mFactory.buildArmature(1);
                mArmature.x = 375;
                mArmature.y = 600;
                Laya.stage.addChild(mArmature);
                mArmature.on(Event.LABEL, this, onEvent);
                mArmature.on(Event.STOPPED, this, completeHandler);
                play();
            }

            function onEvent() {

            }

            //動畫結束后回調
            function completeHandler() {
                //動畫結束
                // 字漸漸出現
                createTween(endMoney);
                //按鈕
                showButton();
                timeoutFun = setTimeout(function(){
                    onDecreaseAlpha1();
                },3000);
            }

            function showButton() {
                button1 = createButton("關閉");
                button1.x = 550;
                button1.y = 150;
                Laya.stage.addChild(button1);
                button1.on(Event.CLICK, this, onDecreaseAlpha1);
            }

            function play() {
                mCurrIndex++;
                if (mCurrIndex >= mArmature.getAnimNum()) {
                    mCurrIndex = 0;
                }
                mArmature.play(mCurrIndex, false);
            }


        })();
    };
    
    window.swellGame = layaGameInit;
})();

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM