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

Vector类和Vector3D类是我去年在看了Robert Penner的书《Flash MX编程与创意实现》之后用Javascript写了一遍。

虽然这书很旧，讲解的Flash版本也早已过时，但是书里的内容却从未过时，在Robert的著作里，他揭示了视觉效果与代码之间的联系。Robert是我非常敬佩的一位程序开发人员，他对Flash的影响也可谓是深远的，他所研究出来的缓动公式（ease）可以说影响了一大批JS和AS开发人员，目前市面上所能见到的AS/JS运动公式（Tweener），大部分都是以此为基础扩展和深入而来。Flash内置的Tweener也是基于他所开发的类而完成，虽然时至今天，已经有了不少效率更好的Tween类，但Robert对Flash的贡献是意义重大的，后来他也曾一度加入Adobe公司进行Flash软件开发。

我用Vector和Vector3D类写了几个Javascript动态效果，不过感觉用JS实现，执行效率仍然是不高，但是前两天又把原来写的东西翻了出来，整理了下，也算是一个总结。

旋转效果的核心在于，通过改变vectors数组里的值，再将其应用到旋转元素的坐标，实现圆环的效果。

旋转效果示例

 1 /**
 2  * Circle
 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 Circle = new Class({
     Implements:Options,
     
     options:{
         eW:60,//元素的长
         eH:45,//元素的宽
         mR:200,//转动半径
         mA:0.5,//转动角度
         mD:20,//转动时间,单位毫秒
         direction:-1//旋转方向,1为顺时针,-1为逆时针
     },
     
     initialize:function(elements,options){
         this.setOptions(options);
         this.elements = $$(elements);
         this.amount = this.elements.length;
         this.vectors = [];
         this.calMath();
         
         this.adjustZero();
         this.createVectors();
         this.attach();
         this.mvId = this.setMv.periodical(this.options.mD,this);
         this.start();
     },
     
     start:function(){
         this.isMove = true;
     },
     
     stop:function(){
         this.isMove = false;
     },
     
     attach:function(){
         this.elements.each(function(o){
             o.addEvents({
                 'mouseover': this.stop.bind(this),
                 'mouseout': this.start.bind(this)
             });
         }.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(){
         if (!this.isMove) return;
         this.vectors.each(function(v){
             v.rotateTrig(this.ca,this.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));
         }
     },
     
     setDir:function(dir){
         this.options.direction = dir;
         this.calMath();
     },
     
     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);
     }
 });