使用模块化管理工具seajs实现简单动画效果
今天使用模块化的管理工具seajs实现了一个简单的动画效果。
seajs具有简单友好的模块定义规范。seajs遵循CMD规范，可以像nodejs一样编写代码。
seajs具有自然直观的代码组织方式。依赖的自动加载，配置简洁清晰。
通过学习，发现seajs的使用是具有一个标准的格式的，如下define(function(require,exports,module){ //定义的代码块 });其中回调的参数名和顺序都是不可改变的。
这次小动画实现的文件结构：
word.html代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 img{ 8 opacity: 0.5; 9 transition-duration: 0.8s; 10 } 11 </style> 12 <script src='./sea.js'></script> 13 <script> 14 //使用定义好的js模块 15 seajs.use('./game/contral.js',function(obj){}); 16 </script> 17 </head> 18 <body> 19 <div id="container"> 20 <img src="./img/h.png" alt=""> 21 <img src="./img/h.png" alt=""> 22 <img src="./img/h.png" alt=""> 23 <img src="./img/h.png" alt=""> 24 <img src="./img/h.png" alt=""> 25 <img src="./img/h.png" alt=""> 26 </div> 27 </body> 28 </html>
rotate.js代码如下：
1 define(function(require,exports,module){ 2 //引入jq，在这里需要将jq做稍微的改动， 3 //将jq的代码也用seajs语法模块化 4 var $=require('../jquery.js'); 5 //定义函数，通过传入容器id使所有的容器下的图片运动起啦 6 var RotateWord = function(id){ 7 this.container = $(id); 8 this.icons = this.container.children(); //所有的图片 9 //定义一个方法的数组用来存放方法 10 this.arr = []; 11 } 12 13 module.exports =RotateWord; 14 //定义一个随机数 15 var random = function(num){ 16 return Math.random()*num; 17 } 18 19 //给RotateWord添加方法 20 RotateWord.prototype={ 21 //初始化图片的方法 22 _init:function(){ 23 var arr = this.arr; 24 $(this.icons).each(function(index,item){ 25 var obj = $(item); //将普通对象转化为jq对象 26 var time; 27 obj.hover(function(){ 28 obj.css('opacity',1).css('transform','rotate(0deg)'); 29 30 }, 31 function(){ 32 obj.css('opacity',0.5); 33 time && clearTimeout(time); 34 time=setTimeout(rotateFn,Math.ceil(random(5000))); 35 36 }); 37 //定义一个旋转的方法 38 function rotateFn(){ 39 obj.css('transform','rotate('+random(360)+'deg)'); 40 } 41 //将每一个元素的方法保存起来 42 arr[index]=rotateFn; 43 }); 44 }, 45 _rotate:function(){ 46 //让元素在默认的情况下有一定的旋转 47 $(this.arr).each(function(n,fn){ 48 setTimeout(fn,Math.ceil(random(3000))); 49 }); 50 }, 51 render:function(){ 52 //开启动画效果 53 this._init(); 54 this._rotate(); 55 } 56 } 57 })
control.js（用于管理各个分模块，这个动画效果案例只有一个分模块页面）代码如下：
1 define(function(require,exports,module){ 2 //导入定义好的模块 3 var RotateWord =require('./rotate.js'); 4 //创建对象，调用方法，实现动画效果 5 var obj = new RotateWord('#container'); 6 obj.render(); 7 })
