[Javascript][Vector类]旋转效果（二）

这个旋转效果是我在看到一个FLASH后想到用Javascript来实现下，于是便有了这个效果，通过鼠标来移动来旋转圆环，旋转的方向与鼠标移动的方向相反。相较于Flash，我这个JS版的效果与效率都大打折扣，纯粹是我想看看能否通过Vector类来完成这些东西罢了。

旋转效果（二）与旋转效果（一）相比，有好几个相同的方法，可以通过Mootools.js里Class类的extend或者implement方法来消除重复的代码编写，我这里偷懒，写成了两个独立的类。

旋转效果示例

 1 /**
 2  * Circle II
 3  * @classDescription create a rotating circle
 4  * @dependence Mootools (http://www.mootools.net), Math.js, Vector.js
 5  * @author Aken.li (http://www.kxbd.com)
 6  * @version 1.0
 7  * @created 2009.01.15
 8  */
 9 
 var CircleII = new Class({
     Implements:Options,
     
     options:{
         eW:60,//元素的长
         eH:45,//元素的宽
         mR:200,//转动半径
         mD:40//转动时间,单位毫秒
     },
     
     initialize:function(elements,options){
         this.setOptions(options);
         this.elements = $$(elements);
         this.amount = this.elements.length;
         this.vectors = [];
         this.mousePos = {x:0,y:0};
         this.attach();
         this.adjustZero();
         this.createVectors();
         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，再渲染圆环
     setMv:function(){
         var eX = this.mousePos.x-this.zero.x, eY = this.mousePos.y-this.zero.y;
         var angle = 0;
         //console.log(this.mouseV);
         if(!this.mouseV) {
             this.mouseV = new Vector(eX,eY);
         }else{
             angle = this.mouseV.getAngle();
             this.mouseV.reset(eX,eY);
             angle -= this.mouseV.getAngle();
         }
         var ca = Math.cosD(angle);
         var sa = Math.sinD(angle);
         
         this.vectors.each(function(v){
             v.rotateTrig(ca,sa);
         }, this);
         this.elements.each(function(o,i){
             o.setStyles({
                 left:this.zero.x+this.vectors[i].x-this.options.eW*0.5,
                 top:this.zero.y+this.vectors[i].y-this.options.eH*0.5
             });
         }, this);
     },
 
     //创建vectors数组
     createVectors:function() {
         var amount = this.amount;
         var v = new Vector(this.options.mR,0)
         var divide = 360/amount;
         this.vectors.push(v);
         while(--amount){
             this.vectors.push(v.rotateNew(divide*amount));
         }
     }
 });