CreateJS奥运五环动画

索契奥运会结束了，今天给大家看一个利用CreateJS实现的奥运五环动画，在线把玩请点 这里，下载收藏请戳 这里。

html文件非常简单，仅仅是弄了个canvas

[html] view plain copy

1. <canvas id="world"></canvas>  

没有用到CSS，JS文件如下，在这个效果里面五环我们需要两个类，环类和粒子类。这里用到了CreateJS里面的easeljs。我们需要导入这个文件。

http://code.createjs.com/easeljs-0.7.1.min.js

[javascript] view plain copy

1. /*----------------------------------- 
2.     变量 
3. -----------------------------------*/  
4. var cj = createjs,  
5.     stage,  
6.     particles = [],  
7.     centerX,  
8.     centerY,  
9.     particleNum = window.innerWidth / 6,  
10.     color = ["blue","black","red","yellow","green"];  
11.     speed = Math.PI / 60,  
12.     RADIUS = window.innerWidth / 10, //圆的半径  
13.     margin = RADIUS / 10;  
14.     SPEED_MIN = RADIUS / 2,  
15.     SPEED_MAX = RADIUS;  
16.   
17. /*----------------------------------- 
18.     初始化 
19. -----------------------------------*/  
20. function init(){  
21.     var rotateCenterX,  
22.         rotateCenterY,  
23.         circle,  
24.         radius = RADIUS;  
25.     //生成舞台  
26.     stage = new cj.Stage("world");  
27.     stage.canvas.width　= window.innerWidth;  
28.     stage.canvas.height　= window.innerHeight;  
29.   
30.     for(var i = 1;i <= 3;i++){  
31.         circle = new Circle(i,1,radius,color[i - 1]);  
32.         circle.create();       
33.     }  
34.       
35.     circle = new Circle(1,2,radius,color[3]);    
36.     circle.create();  
37.       
38.     circle = new Circle(2,2,radius,color[4]);   
39.     circle.create();  
40.     
41.     //渲染到舞台  
42.     stage.update();  
43. }  
44. cj.Ticker.timingMode = cj.Ticker.RAF;  
45. cj.Ticker.addEventListener("tick",tick);  
46.   
47. /*----------------------------------- 
48.     自動更新 
49. -----------------------------------*/  
50. function tick(){  
51.     for(var i = 0;i < particles.length;i++){  
52.         var particle = particles[i];  
53.         particle.move();  
54.     }  
55.   
56.     //渲染到舞台  
57.     stage.update();  
58. }  
59.   
60. /*----------------------------------- 
61.     粒子构造方法 
62. -----------------------------------*/  
63. function Particle(cx,cy,_angle,_radius,_color){  
64.     this.initialize();  
65.   
66.     //半径  
67.     this.radius = getRandomNum(5,10);  
68.       
69.     getColor(this,_color);  
70.               
71.     this.graphics.drawCircle(0,0,getRandomNum(1,10))  
72.     .endFill();  
73.     //中心位置  
74.     this.centerX = cx;  
75.     this.centerY = cy;  
76.     //角度  
77.     this.angle = _angle;  
78.     //角速度  
79.     if(getRandomNum(1,10) % 2 == 0){  
80.         this.speed =  Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));  
81.     }else{  
82.         this.speed =  - Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));  
83.     }  
84.       
85.     this.rotateCenterX = cx + _radius;  
86.     this.rotateCenterY = cy;  
87.       
88.     this.compositeOperation = "darker";      
89. }  
90.   
91. //継承  
92. Particle.prototype = new cj.Shape();  
93.   
94. /*----------------------------------- 
95.     粒子移动位置 
96. -----------------------------------*/  
97. Particle.prototype.move = function(){  
98.     this.angle += this.speed;  
99.       
100.     this.rotateCenterX = this.centerX + (RADIUS - margin) * Math.cos(this.angle / 5);  
101.     this.rotateCenterY = this.centerY + (RADIUS - margin) * Math.sin(this.angle / 5);  
102.       
103.     this.x = this.rotateCenterX + this.radius * Math.cos(this.angle / 360) * Math.cos(this.angle);  
104.     this.y = this.rotateCenterY + this.radius * Math.sin(this.angle / 360) * Math.sin(this.angle);  
105.   
106. };  
107.   
108. /*----------------------------------- 
109.     环类构造方法 
110. -----------------------------------*/  
111. function Circle(cx,cy,r,_color){  
112.     if(cy == 1){//上段  
113.         this.centerX = r + 2 * r * (cx - 1) + ((window.innerWidth / 2) - 3 * r);  
114.         this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);  
115.     }else{//下段  
116.         this.centerX = r + 2 * r * (cx - 1) + r + ((window.innerWidth / 2) - 3 * r);  
117.         this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);  
118.     }  
119.       
120.     this.radius = r;  
121.     this.color = _color;  
122. }  
123.   
124. /*----------------------------------- 
125.     环类的生成方法 
126. -----------------------------------*/  
127. Circle.prototype.create = function(){  
128.     var rotateCenterX = this.centerX + this.radius,  
129.         rotateCenterY = this.centerY;  
130.       
131.     for(var j = 1;j < particleNum;j++){  
132.         var angle = j * 15 * 10;  
133.           
134.         var particle = new Particle(this.centerX,this.centerY,angle,this.radius,this.color);  
135.         particles.push(particle);  
136.         stage.addChild(particle);  
137.     }  
138. };  
139.   
140. /*----------------------------------- 
141.     取得随机数 
142. -----------------------------------*/  
143. function getRandomNum( min, max ) {  
144.     return ( Math.random() * ( max - min ) + min ) | 0;  
145. }  
146.   
147. /*----------------------------------- 
148.     取得颜色 
149. -----------------------------------*/  
150. function getColor(obj,_color){  
151.     var fillColor;  
152.     switch(_color){  
153.         case "blue":  
154.             switch((Math.random() * 5 | 0 ) % 5){  
155.                 case 0:  
156.                     fillColor = obj.graphics.beginFill("#0B5FA5");  
157.                     break;  
158.                 case 1:  
159.                     fillColor = obj.graphics.beginFill("#25547B");  
160.                     break;  
161.                 case 2:  
162.                     fillColor = obj.graphics.beginFill("#043C6B");  
163.                     break;  
164.                 case 3:  
165.                     fillColor = obj.graphics.beginFill("#3F8FD2");  
166.                     break;  
167.                 case 4:  
168.                     fillColor = obj.graphics.beginFill("#66A1D2");  
169.                     break;  
170.                 default:  
171.                     break;  
172.             }  
173.             break;  
174.         case "black":  
175.             switch((Math.random() * 5 | 0 ) % 5){  
176.                 case 0:  
177.                     fillColor = obj.graphics.beginFill("#000");  
178.                     break;  
179.                 case 1:  
180.                     fillColor = obj.graphics.beginFill("#111");  
181.                     break;  
182.                 case 2:  
183.                     fillColor = obj.graphics.beginFill("#191919");  
184.                     break;  
185.                 case 3:  
186.                     fillColor = obj.graphics.beginFill("#2a2a2a");  
187.                     break;  
188.                 case 4:  
189.                     fillColor = obj.graphics.beginFill("#3b3b3b");  
190.                     break;  
191.                 default:  
192.                     break;  
193.             }  
194.             break;  
195.         case "red":  
196.             switch((Math.random() * 5 | 0 ) % 5){  
197.                 case 0:  
198.                     fillColor = obj.graphics.beginFill("#FF0000");  
199.                     break;  
200.                 case 1:  
201.                     fillColor = obj.graphics.beginFill("#BF3030");  
202.                     break;  
203.                 case 2:  
204.                     fillColor = obj.graphics.beginFill("#A60000");  
205.                     break;  
206.                 case 3:  
207.                     fillColor = obj.graphics.beginFill("#FF4040");  
208.                     break;  
209.                 case 4:  
210.                     fillColor = obj.graphics.beginFill("FF7373");  
211.                     break;  
212.                 default:  
213.                     break;  
214.             }  
215.             break;   
216.         case "yellow":  
217.             switch((Math.random() * 5 | 0 ) % 5){  
218.                 case 0:  
219.                     fillColor = obj.graphics.beginFill("#FFF500");  
220.                     break;  
221.                 case 1:  
222.                     fillColor = obj.graphics.beginFill("#BFBA30");  
223.                     break;  
224.                 case 2:  
225.                     fillColor = obj.graphics.beginFill("#A69F00");  
226.                     break;  
227.                 case 3:  
228.                     fillColor = obj.graphics.beginFill("#FFF840");  
229.                     break;  
230.                 case 4:  
231.                     fillColor = obj.graphics.beginFill("#FFFA73");  
232.                     break;  
233.                 default:  
234.                     break;  
235.             }  
236.             break;   
237.         case "green":  
238.             switch((Math.random() * 5 | 0 ) % 5){  
239.                 case 0:  
240.                     fillColor = obj.graphics.beginFill("#25D500");  
241.                     break;  
242.                 case 1:  
243.                     fillColor = obj.graphics.beginFill("#3DA028");  
244.                     break;  
245.                 case 2:  
246.                     fillColor = obj.graphics.beginFill("#188A00");  
247.                     break;  
248.                 case 3:  
249.                     fillColor = obj.graphics.beginFill("#59EA3A");  
250.                     break;  
251.                 case 4:  
252.                     fillColor = obj.graphics.beginFill("#80EA69");  
253.                     break;  
254.                 default:  
255.                     break;  
256.             }  
257.             break;   
258.         default:  
259.             break;                
260.     }  
261.       
262.     return fillColor;  
263. }  
264. init();  

好的，大家可以仔细研读，最好在理清思路之后自行实现一下。

当然，大家也可以看看本博客的另一篇文章《SVG奥林匹克五环动画》，或是看看codepen上的另一个效果。