[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数组里的值，再将其应用到旋转元素的坐标，实现圆环的效果。

旋转效果示例

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

转载于:https://www.cnblogs.com/noidea/archive/2009/01/15/1376411.html