[Javascript][Vector3D类]旋转效果（四）

使用Vector3D类来完成鼠标移动旋转元素，元素将同时绕着X轴和Y轴旋转，看多了眼很花。

用Vector和Vector3D完成的这些效果执行效率都不高，而且视觉效果也不算好，写了这些东西出来，只是为了好玩而已，另外也可以用来熟悉如何将常见的视觉效果用代码来实现。

旋转效果示例

 1 /**
 2  * Galley 3D
 3  * @classDescription create a rotating galley with 3 dimensions.
 4  * @dependence Mootools.js(http://www.mootools.net), Math.js, Vector3D.js
 5  * @author Aken.li (http://www.kxbd.com)
 6  * @version 1.0
 7  * @created 2009.01.16
 8  */
 9 
 var Galley3D = new Class({
     Implements:Options,
     
     options:{
         eW:60,//元素的长
         eH:45,//元素的宽
         rows:5,//行数
         cols:4,//列数
         gapX:120,//列间距
         gapY:100,//行间距
         mA:0.0002,//转动角度
         mD:20,//转动时间,单位毫秒
         pers: 400//透视比例
     },
     
     initialize:function(elements,options){
         this.setOptions(options);
         this.elements = $$(elements);
         this.amount = this.elements.length;
         this.vectors = [];
         this.xposFix = ((this.options.rows-1)*this.options.gapX+this.options.eW)*0.5;
         this.yposFix = ((this.options.cols-1)*this.options.gapY+this.options.eH)*0.5;
         this.mousePos = {x:0,y:0};
         this.fps = 0;
         
         this.adjustZero();
         this.createVectors();
         this.attach();
         this.mvId = this.setMv.periodical(this.options.mD,this);
     },
     
     attach:function(){
         document.addEvent('mousemove',function(e){
             this.mousePos.x = e.client.x;
             this.mousePos.y = e.client.y;
         }.bind(this));
         window.addEvent('resize',this.adjustZero.bind(this));
     },
     
     //调整转动原点
     adjustZero:function(){
         var dimsWin = Document.getSize();
         this.zero = {x:dimsWin.x*0.5, y:dimsWin.y*0.5}
     },
     
     //改变vectors，再渲染Galley
     setMv:function(){
         this.fps++;
         var eX = this.mousePos.x, eY = this.mousePos.y;
         var angleA = 0, angleB = 0;
         var diffX = eX - this.zero.x;
         var diffY = eY - this.zero.y;
         angleA = Math.radiansToDegrees(diffY)*this.options.mA;
         angleB = Math.radiansToDegrees(diffX)*this.options.mA;
 
         var ca = Math.cosD(angleA);
         var sa = Math.sinD(angleA);
         var cb = Math.cosD(angleB);
         var sb = Math.sinD(angleB);
         this.vectors.each(function(v){
             //v.rotateXTrig(ca,sa);
             //v.rotateYTrig(cb,sb);
             v.rotateXYTrig(ca,sa,cb,sb);
         });
         this.render();
     },
     
     //渲染Galley
     render:function(){
         this.elements.each(function(o,i){
             var v = this.vectors[i];
             o.setStyles({
                 left:v.x+this.zero.x,
                 top:v.y+this.zero.y,
                 width:v.getPerspective(this.options.pers)*this.options.eW,
                 zIndex:10000-v.z*10
             });
         }, this);
     },
 
     //创建vectors数组
     createVectors:function() {
         for(var i=0;i<this.options.cols;i++){
             for(var j=0; j<this.options.rows;j++){
                 this.vectors.push(new Vector3D(j*this.options.gapX-this.xposFix,i*this.options.gapY-this.yposFix,0));
             }
         }
     }
 });