本文主要是介绍TWaver网元动态转动效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近有客户提了一个网元动态旋转的需求，用TWaver实现起来还是很方便的，效果如下图所示：
主要实现功能：
1:网元动态旋转
2:网元选中效果，被选中网元快速转到最前端后停止旋转，取消选中自动重启旋转
3:根据鼠标位置自动调整旋转方向
4:可以在程序中修改fw/bw/fh/bh调整图片显示效果。
代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"creationComplete="test()"width="100%"height="100%"xmlns:ns="http://www.servasoftware.com/2009/twaver/flex"><mx:Script><![CDATA[import mx.events.ResizeEvent;import twaver.Collection;import twaver.Consts;import twaver.ElementBox;import twaver.IData;import twaver.IElement;import twaver.Layer;import twaver.Node;import twaver.SelectionChangeEvent;import twaver.SelectionModel;import twaver.Styles;import twaver.SubNetwork;import twaver.Utils;import twaver.core.util.l.u;private var box:ElementBox = new ElementBox();private var _rotationList:Collection = new Collection();private var rectIndexMap:Object = {};private var indexRectMap:Object = {};private var rList:Collection = new Collection();private var _startAngle:Number = 90;private var timer:Timer;private var _selectNode:Node;private var _clockSise:Boolean = false;private var _stopAngle:Number = 0;private var _needStop:Boolean = false;[Embed(source="images/1.png")]public static const p1:Class;[Embed(source="images/2.png")]public static const p2:Class;[Embed(source="images/3.png")]public static const p3:Class;[Embed(source="images/4.png")]public static const p4:Class;[Embed(source="images/5.png")]public static const p5:Class;[Embed(source="images/6.png")]public static const p6:Class;[Embed(source="images/7.png")]public static const p7:Class;[Embed(source="images/8.png")]public static const p8:Class;public function get clockSise():Boolean{return _clockSise;}public function set clockSise(value:Boolean):void{if(this.clockSise==value){return;}_clockSise = value;}private function resetClockSize( point:Point):void {if (_needStop == true) {return;}if (point.x > this.network.width / 2) {clockSise = false;} else {clockSise = true;}}public function get selectNode():Node{return _selectNode;}public function set selectNode(value:Node):void{if(this.selectNode==value){return;}_selectNode = value;if(this.selectNode==null){_needStop = false;timer.delay = 30;if(!timer.running){timer.start();}}else{var rect:Rectangle = indexRectMap[this.selectNode] as Rectangle;var left:Boolean = (rect.x+rect.width/2)<network.width/2;if(left){clockSise = false;}else{clockSise = true;}var index:int = rotationList.getItemIndex(this.selectNode);var size:int = this.rotationList.count;var step:Number = 360/size;_stopAngle = 90 - index * step;_needStop = true;timer.delay = 5;if(!timer.running){timer.start();}}}public function start():void{timer.start();}public function stop():void{if(timer!=null){timer.stop();}}public function get startAngle():Number{return _startAngle;}public function set startAngle(value:Number):void{_startAngle = (value+360)%360;this.measureRotation();}public function get rotationList():Collection{return _rotationList;}public function set rotationList(value:Collection):void{_rotationList = value;this.box.layerBox.clear();var size:int = this.rotationList.count;for(var i:int = 0;i<size;i++){var l:Layer = new Layer("r:"+i);box.layerBox.add(l);}this.measureRotation();}private function measureRotation():void{rectIndexMap = {};indexRectMap = {};rList.clear();var size:int = this.rotationList.count;if(size==0){return;}var w:Number = this.network.width;var h:Number = this.network.height;var fw:Number = 1.0 / 3 * w;var bw:Number = 1.0 / 6 * w;var fh:Number = h / 2.5;var bh:Number = h / 7.0;var m:Number = (fw - bw) / 4;var cw:Number = m * 2 + bw;var halfcw:Number = cw / 2;var x:Number = halfcw + 15;w = w - halfcw * 2 - 30;var y:Number = bh / 2 + 10;h = h - fh / 2 - bh / 2 - 20;var step:Number = 360.0 / size;for(var i:int = 0;i<size;i++){var n:Node = this.rotationList.getItemAt(i) as Node;var p:Point = this.getPointAtEllipse(x,y,w,h,startAngle+step*i);var px:Number = p.x;var py:Number = p.y;var pm:Number = (py - y) / h * (fw - bw) / 2;var ww:Number = pm * 2 + bw;var hh:Number = (py - y) / h * (fh - bh) + bh;var rect:Rectangle = new Rectangle(px - ww / 2, py - hh / 2, ww, hh);n.setSize(rect.width,rect.height);n.setCenterLocation(px,py);rectIndexMap[rect] = n;indexRectMap[n] = rect;rList.addItem(rect);}rList.sort(rectSort);for(var j:int = 0;j<size;j++){var rr:Rectangle = rList.getItemAt(j) as Rectangle;var nn:Node = rectIndexMap[rr];nn.layerID = "r:"+j;}}private function rectSort(r1:Rectangle,r2:Rectangle):int{if (r1.width> r2.width) {return 1;}if (r1.width < r2.width) {return -1;}return 0;}public function getPointAtEllipse(x:Number, y:Number, w:Number, h:Number, angled:Number):Point {var angle:Number =angled / 180.0 * Math.PI;var px:Number = x + (Math.cos(angle) * 0.5 + 0.5) * w;var py:Number = y + (Math.sin(angle) * 0.5 + 0.5) * h;return new Point(px, py);}private function init():void{timer=new Timer(30);timer.addEventListener(TimerEvent.TIMER,function():void{if(clockSise){startAngle = startAngle+1;}else{startAngle = startAngle-1;}if(_needStop){var abs:Number = Math.abs(startAngle-(_stopAngle+360)%360);if(abs<2){timer.stop();}}});network.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{var p:Point = network.getLogicalPoint(e);resetClockSize(p);});network.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{var p:Point = network.getLogicalPoint(e);var element:IElement = network.getElementByMouseEvent(e);selectNode = element as Node;resetClockSize(p);});network.addEventListener(ResizeEvent.RESIZE,function():void{measureRotation();});}private function test():void{init();Utils.registerImageByClass("p1", p1);Utils.registerImageByClass("p2", p2);Utils.registerImageByClass("p3", p3);Utils.registerImageByClass("p4", p4);Utils.registerImageByClass("p5", p5);Utils.registerImageByClass("p6", p6);Utils.registerImageByClass("p7", p7);Utils.registerImageByClass("p8", p8);var list:Collection = new Collection();for(var i:int = 1;i<9;i++){var sub:Node = new Node();sub.setStyle(Styles.SELECT_STYLE,Consts.SELECT_STYLE_BORDER);sub.setStyle(Styles.IMAGE_STRETCH,Consts.STRETCH_FILL);sub.setStyle(Styles.SELECT_COLOR,"0x00ff00");sub.setStyle(Styles.LABEL_POSITION,Consts.POSITION_CENTER);sub.image = "p"+i;sub.name = "sub"+ilist.addItem(sub);box.add(sub);}this.rotationList = list;network.elementBox = box;this.start();}]]></mx:Script><ns:Network id="network" width="100%" height="100%" backgroundColor="0xffffff"></ns:Network>
</mx:Application>
这篇关于TWaver网元动态转动效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
