diff --git a/docs/js/index.js b/docs/js/index.js index fa27c70..5544c28 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -1 +1 @@ -"use strict";var app=new Vue({el:"#app",data:{sizeType:"1",canvasData:{width:640,height:480},frameData:{row:1,col:1,prewidth:640,preheight:480},fileList:[],imgLoading:!1,cssStr:"",cssAttr:{unit:"1",design:"640",name:"keys",loop:!1,loopNum:0,time:1,delay:0},imgStr:"",btnText:"开始生成",btnLoading:!1},computed:{canvas:function(){return"1"===this.sizeType?{width:+this.canvasData.width,height:+this.canvasData.height}:"2"===this.sizeType?{width:this.frameData.col*this.frameData.prewidth,height:this.frameData.row*this.frameData.preheight}:void 0}},methods:{fileChange:function(t,a){this.fileList=a},fileRemove:function(t,a){this.fileList=a},dealCss:function(t,a){var e=this.cssAttr,i="",n=0,c=0;switch(e.unit){case"1":i="px",n=+this.frameData.prewidth,c=+this.frameData.preheight;break;case"2":i="rem",n=+this.frameData.prewidth/100,c=+this.frameData.preheight/100;break;case"3":i="vw",n=+this.frameData.prewidth/+e.design,n=+this.frameData.preheight/+e.design}for(var s=(100/this.fileList.length).toFixed(2),o=".".concat(e.name," {\n width: ").concat(n).concat(i,";\n height: ").concat(c).concat(i,";\n background-size: ","".concat((a*n).toFixed(2)).concat(i," ").concat((t*c).toFixed(2)).concat(i),";\n}\n\n.").concat(e.name,".anim {\n animation: ").concat(e.name," ").concat(e.time,"s ").concat(+e.delay?"".concat(e.delay,"s"):""," steps(1, end) forwords ").concat(e.loop?+e.loopNum?e.loopNum:"infinite":"",";\n}"),h="",r=0;rc?setTimeout(function(){n.startDealing(c)},1e3):(n.imgStr=e.toDataURL("image/png"),n.btnText="开始生成",n.btnLoading=!1,n.$message.success("图片生成完成"))},a.onload=function(t){s.src=t.target.result},a.readAsDataURL(this.fileList[c].raw)}}}); \ No newline at end of file +"use strict";var app=new Vue({el:"#app",data:{sizeType:"1",canvasData:{width:640,height:480},frameData:{row:1,col:1,prewidth:640,preheight:480},fileList:[],imgLoading:!1,cssStr:"",cssAttr:{unit:"1",design:"640",name:"keys",loop:!1,loopNum:0,time:1,delay:0},imgStr:"",btnText:"开始生成",btnLoading:!1},computed:{canvas:function(){return"1"===this.sizeType?{width:+this.canvasData.width,height:+this.canvasData.height}:"2"===this.sizeType?{width:this.frameData.col*this.frameData.prewidth,height:this.frameData.row*this.frameData.preheight}:void 0}},methods:{fileChange:function(t,a){this.fileList=a},fileRemove:function(t,a){this.fileList=a},dealCss:function(t,a){var e=this.cssAttr,i="",n=0,c=0;switch(e.unit){case"1":i="px",n=+this.frameData.prewidth,c=+this.frameData.preheight;break;case"2":i="rem",n=+this.frameData.prewidth/100,c=+this.frameData.preheight/100;break;case"3":i="vw",n=+this.frameData.prewidth/+e.design,c=+this.frameData.preheight/+e.design}for(var o=(100/this.fileList.length).toFixed(2),s=".".concat(e.name," {\n width: ").concat(n).concat(i,";\n height: ").concat(c).concat(i,";\n background-size: ","".concat((a*n).toFixed(2)).concat(i," ").concat((t*c).toFixed(2)).concat(i),";\n}\n\n.").concat(e.name,".anim {\n animation: ").concat(e.name," ").concat(e.time,"s").concat(+e.delay?" ".concat(e.delay,"s "):" ","steps(1, end) forwords").concat(e.loop?+e.loopNum?" ".concat(e.loopNum):" infinite":"",";\n}"),h="",r=0;rc?setTimeout(function(){n.startDealing(c)},1e3):(n.imgStr=e.toDataURL("image/png"),n.btnText="开始生成",n.btnLoading=!1,n.$message.success("图片生成完成"))},a.onload=function(t){o.src=t.target.result},a.readAsDataURL(this.fileList[c].raw)}}}); \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index f09e557..cb8c733 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -69,16 +69,16 @@ const app = new Vue({ case '3': unit = 'vw' wUnit = +this.frameData.prewidth / +data.design - wUnit = +this.frameData.preheight / +data.design + hUnit = +this.frameData.preheight / +data.design break } let step = (100 / this.fileList.length).toFixed(2) - let animClass = `.${data.name} {\n width: ${wUnit}${unit};\n height: ${hUnit}${unit};\n background-size: ${`${(col * wUnit).toFixed(2)}${unit} ${(row * hUnit).toFixed(2)}${unit}`};\n}\n\n.${data.name}.anim {\n animation: ${data.name} ${data.time}s ${ - +data.delay ? `${data.delay}s` : '' - } steps(1, end) forwords ${ - data.loop ? (+data.loopNum ? data.loopNum : 'infinite') : '' + let animClass = `.${data.name} {\n width: ${wUnit}${unit};\n height: ${hUnit}${unit};\n background-size: ${`${(col * wUnit).toFixed(2)}${unit} ${(row * hUnit).toFixed(2)}${unit}`};\n}\n\n.${data.name}.anim {\n animation: ${data.name} ${data.time}s${ + +data.delay ? ` ${data.delay}s ` : ' ' + }steps(1, end) forwords${ + data.loop ? (+data.loopNum ? ` ${data.loopNum}` : ' infinite') : '' };\n}` - // console.log(animClass) + // console.log(ani mClass) let frames = '' for (let i = 0; i < this.fileList.length; i++) { if (i === 0) {