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

这节将使用Vector3D类来完成旋转效果（一）的效果，两节的代码逻辑保持一致，大多数代码也相同，不过这节采用了Vector3D类来完成，实现了三维视觉的旋转效果。

另外，再加上了是绕X轴还是Y轴旋转的判断，实现了两种不同的旋转方式。

旋转效果示例一

旋转效果示例二

  1 /**
  2  * Circle 3D
  3  * @classDescription create a rotating circle 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.15
  8  */
  9 
 10 var Circle3D = new Class({
 11     Implements:Options,
 12     
 13     options:{
 14         eW:60,//元素的长
 15         eH:45,//元素的宽
 16         mR:200,//转动半径
 17         mA:0.5,//转动角度
 18         mD:20,//转动时间,单位毫秒
 19         direction:-1,//旋转方向,1为顺时针,-1为逆时针
 20         pers: 450,//透视比例
 21         render:1//旋转轴,1为Y轴,-1为X轴
 22     },
 23     
 24     initialize:function(elements,options){
 25         this.setOptions(options);
 26         this.elements = $$(elements);
 27         this.amount = this.elements.length;
 28         this.vectors = [];
 29         this.calMath();
 30         
 31         this.adjustZero();
 32         this.createVectors();
 33         this.attach();
 34         this.mvId = this.setMv.periodical(this.options.mD,this);
 35         this.start();
 36     },
 37     
 38     start:function(){
 39         this.isMove = true;
 40     },
 41     
 42     stop:function(){
 43         this.isMove = false;
 44     },
 45     
 46     attach:function(){
 47         this.elements.each(function(o){
 48             o.addEvents({
 49                 'mouseover': this.stop.bind(this),
 50                 'mouseout': this.start.bind(this)
 51             });
 52         }.bind(this));
 53         window.addEvent('resize',this.adjustZero.bind(this));
 54     },
 55     
 56     //调整转动圆心
 57     adjustZero:function(){
 58         var dimsWin = Document.getSize();
 59         this.zero = {x:dimsWin.x*0.5, y:dimsWin.y*0.5}
 60     },
 61     
 62     //改变vectors，再渲染圆环
 63     setMv:function(){
 64         if (!this.isMove) return;
 65         this.vectors.each(function(v){
 66             this.options.render == 1 ? v.rotateYTrig(this.ca,this.sa): v.rotateXTrig(this.ca,this.sa);
 67         }, this);
 68         this.render();
 69     },
 70     
 71     //渲染圆环
 72     render:function(){
 73         this.elements.each(function(o,i){
 74             var ratio = this.vectors[i].getPerspective(450);
 75             o.setStyles({
 76                 left:this.options.render ==1 ? this.zero.x+this.vectors[i].x-this.options.eW*0.5: this.zero.x-ratio*this.options.eW*0.5,
 77                 top:this.options.render ==1 ? this.zero.y-ratio*this.options.eH*0.5:this.zero.y+this.vectors[i].y-this.options.eH,
 78                 width:ratio*this.options.eW,
 79                 zIndex:10000-Math.round(this.vectors[i].z*10)
 80             });
 81         }, this);
 82     },
 83 
 84     //创建vectors数组
 85     createVectors:function() {
 86         var amount = this.amount;
 87         var v = this.options.render ==1 ? new Vector3D(this.options.mR,0,0): new Vector3D(0,this.options.mR,0);
 88         var divide = 360/amount;
 89         this.vectors.push(v);
 90         while(--amount){
 91             this.options.render ==1 ? this.vectors.push(v.getClone().rotateY(divide*amount)) : this.vectors.push(v.getClone().rotateX(divide*amount));
 92         }
 93     },
 94     
 95     setDir:function(dir){
 96         this.options.direction = dir;
 97         this.calMath();
 98     },
 99     
     toggleDir:function(){
         this.options.direction = this.options.direction==1 ? -1:1;
         this.calMath();
     },
     
     calMath:function(){
         var _angle = this.options.direction*this.options.mA;
         this.ca = Math.cosD(_angle);
         this.sa = Math.sinD(_angle);
     }
 });