TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

TWaver网元动态转动效果

Posted on 2012-06-05 17:54 TWaver 阅读(1375) 评论(0)  编辑  收藏
最近有客户提了一个网元动态旋转的需求,用TWaver实现起来还是很方便的,效果如下图所示:
主要实现功能:
1:网元动态旋转
2:网元选中效果,被选中网元快速转到最前端后停止旋转,取消选中自动重启旋转
3:根据鼠标位置自动调整旋转方向
4:可以在程序中修改fw/bw/fh/bh调整图片显示效果
 

代码如下所示: 
  1 <?xml version="1.0" encoding="utf-8"?>
  2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3                 layout="absolute"
  4                 creationComplete="test()"
  5                 width="100%"
  6                 height="100%"
  7                 xmlns:ns="http://www.servasoftware.com/2009/twaver/flex">
  8     <mx:Script>
  9         <![CDATA[
 10             import mx.events.ResizeEvent;
 11 
 12             import twaver.Collection;
 13             import twaver.Consts;
 14             import twaver.ElementBox;
 15             import twaver.IData;
 16             import twaver.IElement;
 17             import twaver.Layer;
 18             import twaver.Node;
 19             import twaver.SelectionChangeEvent;
 20             import twaver.SelectionModel;
 21             import twaver.Styles;
 22             import twaver.SubNetwork;
 23             import twaver.Utils;
 24             import twaver.core.util.l.u;
 25             private var box:ElementBox = new ElementBox();
 26 
 27             private var _rotationList:Collection = new Collection();
 28             private var rectIndexMap:Object = {};
 29             private var indexRectMap:Object = {};
 30             private var rList:Collection = new Collection();
 31             private var _startAngle:Number = 90;
 32             private var timer:Timer;
 33             private var _selectNode:Node;
 34 
 35             private var _clockSise:Boolean = false;
 36 
 37             private var _stopAngle:Number = 0;
 38             private var _needStop:Boolean = false;
 39 
 40             [Embed(source="images/1.png")]
 41             public static const p1:Class;
 42             [Embed(source="images/2.png")]
 43             public static const p2:Class;
 44             [Embed(source="images/3.png")]
 45             public static const p3:Class;
 46             [Embed(source="images/4.png")]
 47             public static const p4:Class;
 48             [Embed(source="images/5.png")]
 49             public static const p5:Class;
 50             [Embed(source="images/6.png")]
 51             public static const p6:Class;
 52             [Embed(source="images/7.png")]
 53             public static const p7:Class;
 54             [Embed(source="images/8.png")]
 55             public static const p8:Class;
 56 
 57             public function get clockSise():Boolean
 58             {
 59                 return _clockSise;
 60             }
 61 
 62             public function set clockSise(value:Boolean):void
 63             {
 64                 if(this.clockSise==value){
 65                     return;
 66                 }
 67                 _clockSise = value;
 68             }
 69             private function resetClockSize( point:Point):void {
 70                 if (_needStop == true) {
 71                     return;
 72                 }
 73                 if (point.x > this.network.width / 2) {
 74                     clockSise = false;
 75                 } else {
 76                     clockSise = true;
 77                 }
 78             }
 79 
 80             public function get selectNode():Node
 81             {
 82                 return _selectNode;
 83             }
 84 
 85             public function set selectNode(value:Node):void
 86             {
 87                 if(this.selectNode==value){
 88                     return;
 89                 }
 90                 _selectNode = value;
 91                 if(this.selectNode==null){
 92                     _needStop = false;
 93                     timer.delay = 30;
 94                     if(!timer.running){
 95                         timer.start();
 96                     }
 97                 }else{
 98                     var rect:Rectangle = indexRectMap[this.selectNode] as Rectangle;
 99                     var left:Boolean = (rect.x+rect.width/2)<network.width/2;
100                     if(left){
101                         clockSise = false;
102                     }else{
103                         clockSise = true;
104                     }
105                     var index:int = rotationList.getItemIndex(this.selectNode);
106 
107                     var size:int = this.rotationList.count;
108                     var step:Number = 360/size;
109                     _stopAngle = 90 - index * step;
110                     _needStop = true;
111                     timer.delay = 5;
112                     if(!timer.running){
113                         timer.start();
114                     }
115                 }
116             }
117 
118             public function start():void{
119                 timer.start();
120             }
121             public function stop():void{
122                 if(timer!=null){
123                     timer.stop();
124                 }
125             }
126 
127             public function get startAngle():Number
128             {
129                 return _startAngle;
130             }
131 
132             public function set startAngle(value:Number):void
133             {
134                 _startAngle = (value+360)%360;
135                 this.measureRotation();
136             }
137 
138             public function get rotationList():Collection
139             {
140                 return _rotationList;
141             }
142 
143             public function set rotationList(value:Collection):void
144             {
145                 _rotationList = value;
146                 this.box.layerBox.clear();
147                 var size:int = this.rotationList.count;
148                 for(var i:int = 0;i<size;i++){
149                     var l:Layer = new Layer("r:"+i);
150                     box.layerBox.add(l);
151                 }
152                 this.measureRotation();
153             }
154             private function measureRotation():void{
155                 rectIndexMap = {};
156                 indexRectMap = {};
157                 rList.clear();
158                 var size:int = this.rotationList.count;
159                 if(size==0){
160                     return;
161                 }
162                 var w:Number = this.network.width;
163                 var h:Number = this.network.height;
164 
165                 var fw:Number = 1.0 / 3 * w;
166                 var bw:Number = 1.0 / 6 * w;
167                 var fh:Number = h / 2.5;
168                 var bh:Number = h / 7.0;
169 
170                 var m:Number = (fw - bw) / 4;
171                 var cw:Number = m * 2 + bw;
172                 var halfcw:Number = cw / 2;
173                 var x:Number = halfcw + 15;
174                 w = w - halfcw * 2 - 30;
175                 var y:Number = bh / 2 + 10;
176                 h = h - fh / 2 - bh / 2 - 20;
177 
178                 var step:Number = 360.0 / size;
179                 for(var i:int = 0;i<size;i++){
180                     var n:Node =  this.rotationList.getItemAt(i) as Node;
181                     var p:Point = this.getPointAtEllipse(x,y,w,h,startAngle+step*i);
182                     var px:Number = p.x;
183                     var py:Number = p.y;
184                     var pm:Number = (py - y) / h * (fw - bw) / 2;
185                     var ww:Number = pm * 2 + bw;
186                     var hh:Number = (py - y) / h * (fh - bh) + bh;
187                     var rect:Rectangle = new Rectangle(px - ww / 2, py - hh / 2, ww, hh);
188                     n.setSize(rect.width,rect.height);
189                     n.setCenterLocation(px,py);
190                     rectIndexMap[rect] = n;
191                     indexRectMap[n] = rect;
192                     rList.addItem(rect);
193                 }
194                 rList.sort(rectSort);
195 
196                 for(var j:int = 0;j<size;j++){
197                     var rr:Rectangle = rList.getItemAt(j) as Rectangle;
198                     var nn:Node = rectIndexMap[rr];
199                     nn.layerID = "r:"+j;
200                 }
201             }
202 
203             private function rectSort(r1:Rectangle,r2:Rectangle):int{
204                 if (r1.width> r2.width) {
205                     return 1;
206                 }
207                 if (r1.width < r2.width) {
208                     return -1;
209                 }
210                 return 0;
211             }
212 
213             public function  getPointAtEllipse(x:Number,   y:Number,   w:Number,   h:Number,   angled:Number):Point {
214                 var angle:Number =angled / 180.0 * Math.PI;
215                 var px:Number = x + (Math.cos(angle) * 0.5 + 0.5) * w;
216                 var py:Number = y + (Math.sin(angle) * 0.5 + 0.5) * h;
217                 return new Point(px, py);
218             }
219 
220             private function init():void{
221                 timer=new Timer(30);
222                 timer.addEventListener(TimerEvent.TIMER,function():void{
223                     if(clockSise){
224                         startAngle = startAngle+1;
225                     }else{
226                         startAngle = startAngle-1;
227                     }
228                     if(_needStop){
229                         var abs:Number = Math.abs(startAngle-(_stopAngle+360)%360);
230                         if(abs<2){
231                             timer.stop();
232                         }
233                     }
234                 });
235                 network.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{
236                     var p:Point = network.getLogicalPoint(e);
237                     resetClockSize(p);
238                 });
239                 network.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{
240                     var p:Point = network.getLogicalPoint(e);
241                     var element:IElement = network.getElementByMouseEvent(e);
242                     selectNode = element as Node;
243                     resetClockSize(p);
244                 });
245                 network.addEventListener(ResizeEvent.RESIZE,function():void{
246                     measureRotation();
247                 });
248             }
249 
250             private function test():void{
251                 init();
252                 Utils.registerImageByClass("p1", p1);
253                 Utils.registerImageByClass("p2", p2);
254                 Utils.registerImageByClass("p3", p3);
255                 Utils.registerImageByClass("p4", p4);
256                 Utils.registerImageByClass("p5", p5);
257                 Utils.registerImageByClass("p6", p6);
258                 Utils.registerImageByClass("p7", p7);
259                 Utils.registerImageByClass("p8", p8);
260                 var list:Collection = new Collection();
261                 for(var i:int = 1;i<9;i++){
262                     var sub:Node = new Node();
263                     sub.setStyle(Styles.SELECT_STYLE,Consts.SELECT_STYLE_BORDER);
264                     sub.setStyle(Styles.IMAGE_STRETCH,Consts.STRETCH_FILL);
265                     sub.setStyle(Styles.SELECT_COLOR,"0x00ff00");
266 
267                     sub.setStyle(Styles.LABEL_POSITION,Consts.POSITION_CENTER);
268                     sub.image = "p"+i;
269                     sub.name = "sub"+i
270                     list.addItem(sub);
271                     box.add(sub);
272                 }
273                 this.rotationList = list;
274                 network.elementBox = box;
275                 this.start();
276             }
277 
278         ]]>
279     </mx:Script>
280     <ns:Network id="network" width="100%" height="100%" backgroundColor="0xffffff">
281 
282     </ns:Network>
283 </mx:Application>

只有注册用户登录后才能发表评论。


网站导航: