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

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

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

旋转效果示例

Code
 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 
10 var CircleII = new Class({
11     Implements:Options,
12     
13     options:{
14         eW:60,//元素的长
15         eH:45,//元素的宽
16         mR:200,//转动半径
17         mD:40//转动时间,单位毫秒
18     },
19     
20     initialize:function(elements,options){
21         this.setOptions(options);
22         this.elements = $$(elements);
23         this.amount = this.elements.length;
24         this.vectors = [];
25         this.mousePos = {x:0,y:0};
26         this.attach();
27         this.adjustZero();
28         this.createVectors();
29         this.mvId = this.setMv.periodical(this.options.mD,this);
30     },
31     
32     attach:function(){
33         document.addEvent('mousemove',function(e){
34             this.mousePos.x = e.client.x;
35             this.mousePos.y = e.client.y;
36         }.bind(this));
37         window.addEvent('resize',this.adjustZero.bind(this));
38     },
39     
40     //调整转动圆心
41     adjustZero:function(){
42         var dimsWin = Document.getSize();
43         this.zero = {x:dimsWin.x*0.5, y:dimsWin.y*0.5}
44     },
45     
46     //改变vectors，再渲染圆环
47     setMv:function(){
48         var eX = this.mousePos.x-this.zero.x, eY = this.mousePos.y-this.zero.y;
49         var angle = 0;
50         //console.log(this.mouseV);
51         if(!this.mouseV) {
52             this.mouseV = new Vector(eX,eY);
53         }else{
54             angle = this.mouseV.getAngle();
55             this.mouseV.reset(eX,eY);
56             angle -= this.mouseV.getAngle();
57         }
58         var ca = Math.cosD(angle);
59         var sa = Math.sinD(angle);
60         
61         this.vectors.each(function(v){
62             v.rotateTrig(ca,sa);
63         }, this);
64         this.elements.each(function(o,i){
65             o.setStyles({
66                 left:this.zero.x+this.vectors[i].x-this.options.eW*0.5,
67                 top:this.zero.y+this.vectors[i].y-this.options.eH*0.5
68             });
69         }, this);
70     },
71 
72     //创建vectors数组
73     createVectors:function() {
74         var amount = this.amount;
75         var v = new Vector(this.options.mR,0)
76         var divide = 360/amount;
77         this.vectors.push(v);
78         while(--amount){
79             this.vectors.push(v.rotateNew(divide*amount));
80         }
81     }
82 });

 

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