generate.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. /**
  2. * Generate animations based off a json file
  3. * Android <4.4 does not support animation-direction:reverse, so we have to create the reverse animation
  4. */
  5. var fs=require("fs");
  6. var path = require("path");
  7. var anims=require("./anims.json");
  8. var out="";
  9. anims.forEach(function(obj){
  10. if(obj.noTrans)
  11. out+=generateNoTrans(obj.name,obj.time);
  12. else
  13. out+=generateAnim(obj.name,obj.time,obj.steps,obj.easing,obj.css);
  14. });
  15. fs.writeFile(path.join(__dirname,"../src/less/animation.less"),out);
  16. function generateNoTrans(name,time,css){
  17. css=css||"";
  18. var tmp="."+name+" {\n"+
  19. " -webkit-animation: noTransition "+time+" forwards;\n"+
  20. " animation: noTransition "+time+" forwards;\n"+
  21. " "+(css)+"\n"+
  22. "}\n\n";
  23. return tmp;
  24. }
  25. function generateAnim(name,time,steps,easing,css){
  26. //loop through steps
  27. if(!css||!css.length)
  28. css="";
  29. var to="";
  30. var reverse="";
  31. if(steps){
  32. for(var j in steps)
  33. {
  34. to+=" "+j+"% { "+steps[j]+"}\n";
  35. reverse+=" "+(100-parseInt(j,10))+"% { "+steps[j]+"}\n";
  36. }
  37. }
  38. var tmp="."+name+" {\n"+
  39. " -webkit-animation: "+name+"Animation "+time+" forwards;\n"+
  40. " animation: "+name+"Animation "+time+" forwards;\n"+
  41. " "+(css)+"\n"+
  42. "}\n\n"+
  43. "@-webkit-keyframes "+name+"Animation {\n"+
  44. to.replace(/transform/g,"-webkit-transform")+
  45. "}\n\n"+
  46. "@keyframes "+name+"Animation {\n"+
  47. to+
  48. "}\n\n";
  49. var time=parseInt(time,10);
  50. time*=1.5;
  51. time=time+"ms";
  52. tmp+="."+name+".animation-reverse {\n"+
  53. " -webkit-animation: "+name+"AnimationReverse "+time+" forwards;\n"+
  54. " animation: "+name+"AnimationReverse "+time+" forwards;\n"+
  55. "}\n\n"+
  56. "@-webkit-keyframes "+name+"AnimationReverse {\n"+
  57. reverse.replace(/transform/g,"-webkit-transform")+
  58. "}\n\n"+
  59. "@keyframes "+name+"AnimationReverse {\n"+
  60. reverse+
  61. "}\n\n";
  62. return tmp;
  63. }