好久沒有發表文章了，這天寫了一個Flash的一個動畫菜單的效果，在之前看到一個站的一個菜單效果挺不錯，就試著自已也用純AS3寫一個出來試試。看了一下研究了一個算法，自已也寫了個出來，寫得比較粗糙，所以運行時可能還會有點小問題，有空要再優化一下算法才行。
有點像 Apple 的菜單效果。原本是計劃用圖片的，不過后右為簡單起見，就只用Sprite畫的一個小方格代替了，供大家學習學習，也希望高手指點一下算法！
以下是代碼：
1 package {
2 import flash.display.Sprite;
3 import flash.geom.Point;
4 import flash.events.MouseEvent;
5 import flash.events.Event;
6 import fl.transitions.Tween;
7 import fl.transitions.easing.*;
8
9 public class jiangmenu extends Sprite
10 {
11 private var photoList:Array; //存放所有方格的數組
12 private var defaultLocation:Array; //存放對應方格數組的默認位置信息
13 private var targetLocation:Array; //存放對應方格數組的改變的目標位置信息
14 private var defaultScale:Array; //存放對應方格數組的默認縮放比例信息
15 private var targetScale:Array; //存放對應方格數組的目標縮放比例信息
16
17 private var maxScale:Number = 1.8; //最大的縮放比例（即鼠標指向的那個方格）
18 private var scaleRate:Number = 0.65; //縮放比例向兩邊衰減的值
19 private var sideWidth:Number = 30; //方格的邊長
20
21 private var tween:Tween;
22
23 /**
24 * 構造函數
25 */
26 public function jiangmenu()
27 {
28 photoList = createPhotoList();
29 createDefaultLocation();
30 createDefaultScale();
31 addListener();
32 }
33
34 /**
35 * 該函數作于對每個按鈕（小方格）增加偵聽器
36 */
37 private function addListener():void{
38 for(var i:int=0;i<photoList.length;i++){
39 var p:Point = defaultLocation[i] as Point;
40 var sp:Sprite = photoList[i] as Sprite;
41 sp.x = p.x;
42 sp.y = p.y;
43 addChild(sp);
44 sp.addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
45 sp.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
46 }
47
48 }
49
50 /**
51 * 鼠標離開小方格時
52 */
53 private function onMouseOut(e:MouseEvent):void{
54 playDefault();
55 }
56
57 /**
58 * 鼠標移動到小方格時
59 */
60 private function onMouseOver(e:MouseEvent):void{
61 var sp:Sprite = e.target as Sprite;
62 var index:int = photoList.indexOf(sp);
63 var dp:Point = defaultLocation[index] as Point;
64 Point(targetLocation[index]).x = dp.x;
65 Point(targetLocation[index]).y = dp.y;
66 targetScale[index] = 1*maxScale;
67
68 playSingle(index);
69
70 setFrontPhoto(index);
71 setBackPhoto(index);
72
73 }
74
75 /**
76 * 為單個方格進行播放動畫效果
77 */
78 private var tmpSP:Sprite;
79 private function playSingle(index:Number):void{
80 tmpSP = photoList[index] as Sprite;
81
82 new Tween(tmpSP,"scaleX",Elastic.easeOut,tmpSP.scaleX,targetScale[index],1,true);
83 new Tween(tmpSP,"scaleY",Elastic.easeOut,tmpSP.scaleY,targetScale[index],1,true);
84 new Tween(tmpSP,"y",Elastic.easeOut,tmpSP.y,Point(targetLocation[index]).y,1,true);
85 }
86
87 /**
88 * 當鼠標離開小方格時，將播放還原到默認大小時的動畫
89 */
90 private function playDefault():void{
91 for(var i:int=0;i<photoList.length;i++){
92 tmpSP = photoList[i] as Sprite;
93 new Tween(tmpSP,"scaleX",Elastic.easeOut,tmpSP.scaleX,defaultScale[i],1,true);
94 new Tween(tmpSP,"scaleY",Elastic.easeOut,tmpSP.scaleY,defaultScale[i],1,true);
95 new Tween(tmpSP,"y",Elastic.easeOut,tmpSP.y,Point(defaultLocation[i]).y,1,true);
96 }
97 }
98
99 /**
100 * 以鼠標移動到當前方格的索引為參數，設置該方格前面的方格的位置與縮放信息并播放
101 * 設置完成后再設置前面的（使用遞歸）
102 */
103 private function setFrontPhoto(index:int):void{
104 if(index == 0){
105 return;
106 }
107 var bp:Point = targetLocation[index] as Point;
108 var bs:Number = targetScale[index];
109
110 var ms:Number = bs * scaleRate;
111 var mp:Point = new Point(bp.x,bp.y - sideWidth*bs*.5 - sideWidth*ms*.5);
112
113 targetLocation[index - 1] = mp;
114 targetScale[index - 1] = ms;
115
116 playSingle(index - 1);
117
118 setFrontPhoto(index - 1);
119 }
120
121 /**
122 * 以鼠標移動到當前方格的索引為參數，設置該方格后面的方格的位置與縮放信息并播放
123 * 設置完成后再設置后面的（使用遞歸）
124 */
125 private function setBackPhoto(index:int):void{
126 if(index == (targetLocation.length - 1)){
127 return;
128 }
129 var bp:Point = targetLocation[index] as Point;
130 var bs:Number = targetScale[index];
131
132 var ms:Number = bs * scaleRate;
133 var mp:Point = new Point(bp.x,bp.y + sideWidth*bs*.5 + sideWidth*ms*.5);
134
135 targetLocation[index + 1] = mp;
136 targetScale[index + 1] = ms;
137
138 playSingle(index + 1);
139
140 setBackPhoto(index + 1);
141 }
142
143 /**
144 * 創建默認的原始大小時的縮放比例
145 */
146 private function createDefaultScale():void{
147 defaultScale = new Array();
148 targetScale = new Array();
149 for(var i:int=0;i<10;i++){
150 defaultScale[i] = 1;
151 targetScale[i] = 1;
152 }
153 }
154
155 /**
156 * 創建默認的原始大小時位置（X,Y）信息
157 */
158 private function createDefaultLocation():void{
159 defaultLocation = new Array();
160 targetLocation = new Array();
161 for(var i:int=0;i<10;i++){
162 var point:Point = new Point();
163 point.x = 100;
164 point.y = 30 * i + 50;
165 defaultLocation.push(point);
166 targetLocation.push(point);
167 }
168 }
169
170 /**
171 * 創建10個小方格，這里直接產生了，不用循環了
172 */
173 private function createPhotoList():Array{
174 var arr:Array = new Array();
175
176 var sp1:Sprite = new Sprite();
177 var sp2:Sprite = new Sprite();
178 var sp3:Sprite = new Sprite();
179 var sp4:Sprite = new Sprite();
180 var sp5:Sprite = new Sprite();
181 var sp6:Sprite = new Sprite();
182 var sp7:Sprite = new Sprite();
183 var sp8:Sprite = new Sprite();
184 var sp9:Sprite = new Sprite();
185 var sp10:Sprite = new Sprite();
186
187 sp1.graphics.beginFill(0xff0000);
188 sp1.graphics.drawRect(-15,-15,sideWidth,sideWidth);
189 sp1.graphics.endFill();
190
191 sp2.graphics.beginFill(0x00ff00);
192 sp2.graphics.drawRect(-15,-15,sideWidth,sideWidth);
193 sp2.graphics.endFill();
194
195 sp3.graphics.beginFill(0x0000ff);
196 sp3.graphics.drawRect(-15,-15,sideWidth,sideWidth);
197 sp3.graphics.endFill();
198
199 sp4.graphics.beginFill(0x00ffff);
200 sp4.graphics.drawRect(-15,-15,sideWidth,sideWidth);
201 sp4.graphics.endFill();
202
203 sp5.graphics.beginFill(0xffff00);
204 sp5.graphics.drawRect(-15,-15,sideWidth,sideWidth);
205 sp5.graphics.endFill();
206
207 sp6.graphics.beginFill(0x0f0f0f);
208 sp6.graphics.drawRect(-15,-15,sideWidth,sideWidth);
209 sp6.graphics.endFill();
210
211 sp7.graphics.beginFill(0xf0f0f0);
212 sp7.graphics.drawRect(-15,-15,sideWidth,sideWidth);
213 sp7.graphics.endFill();
214
215 sp8.graphics.beginFill(0xff00ff);
216 sp8.graphics.drawRect(-15,-15,sideWidth,sideWidth);
217 sp8.graphics.endFill();
218
219 sp9.graphics.beginFill(0x000000);
220 sp9.graphics.drawRect(-15,-15,sideWidth,sideWidth);
221 sp9.graphics.endFill();
222
223 sp10.graphics.beginFill(0xffffff);
224 sp10.graphics.drawRect(-15,-15,sideWidth,sideWidth);
225 sp10.graphics.endFill();
226
227 arr = [sp1,sp2,sp3,sp4,sp5,sp6,sp7,sp8,sp9,sp10];
228
229 return arr;
230 }
231 }
232 }
233
posted on 2008-07-29 14:33
姜大叔 閱讀(1388)
評論(0) 編輯 收藏 所屬分類:
Flash/Flex