用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; })();
FUCKING FRONT-END DEVELOPMENT