用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;
})();

 

转载于:https://www.cnblogs.com/1rookie/p/10344379.html