flex不间断滚动特效

动态加载数据，动态加载控件，并且控制控件的位移，以达到连续不间断滚动效果，并且可以控制滚动速度。

效果：

 

 

具体实现代码如下

控制图片滚动类partnersGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="262"
		 creationComplete="loadSource()">

	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.DataGrid;
			import mx.controls.dataGridClasses.DataGridColumn;
			[Bindable]
			public var dat:ArrayCollection=new ArrayCollection([          
				{name:"一剑定乾坤",sex:"男",age:"22"},         
				{name:"战斗中的熊猫",sex:"女",age:"25"},
				{name:"战斗",sex:"男",age:"25"},
				{name:"熊猫",sex:"女",age:"25"} 
			]); 
			//每次左移多少个像素
			private var moveWidth:Number = 10;
			
			//合作伙伴数量
			private var numPartners:Number = 6;
			
			//延迟时间
			private var delay:uint = 100;
			
			private var timer:Timer;
			
			//已经加载图片跟踪
			//private var logoWacther:ChangeWatcher;
			//xcmt1子组件数量
			[Bindable]
			public var sumChild:Number = 0;
			//资源url
			private var sourcePath:String = "source.xml";
			
			private function loadSource():void
			{
				 sourceLoadComplete();
			}
			// 资源加载完成
			private function sourceLoadComplete():void
			{
				
				for(var i:int = 0; i < numPartners; i++)
				{
					var dataGrid:DataGrid = new DataGrid();
					dataGrid.height=xcmt.height;
					dataGrid.dataProvider=dat;
					dataGrid.x =xcmt.x+xcmt.width*3;
					dataGrid.y = 0;
					dataGrid.editable = true;
					xcmt.addChild(dataGrid);
					
					var sper:VBox = new VBox();
					sper.width = 20;
					sper.height = xcmt.height;
					xcmt.addChild(sper);
					sper.x =  xcmt.getChildAt(i - 1).x +  xcmt.getChildAt(i - 1).width;
					sper.y = 0;
					
					var columns:Array = new Array();
					var col:DataGridColumn;
					col = new DataGridColumn("name");
					col.dataField="name";
					columns.push(col);
					col = new DataGridColumn("sex");
					col.dataField="sex";
					columns.push(col);
					col = new DataGridColumn("age");
					col.dataField="age";
					columns.push(col);
					dataGrid.columns = columns;
					gridLoaded();
				}
			}
			
			private function gridLoaded():void
			{
				sumChild++;
				if(sumChild == numPartners)
				{
					reLayout();
					timer = new Timer(delay);
					timer.addEventListener(TimerEvent.TIMER,timerHandler);
					timerStart();
				}
			}
			
			//判断是否加载了所有图片
			private function reLayout():void
			{
				xcmt.getChildAt(0).x = xcmt.x-xcmt.width;
				xcmt.getChildAt(0).y = 0;
				for(var i:int = 1; i< xcmt.numChildren; i++)
				{
					xcmt.getChildAt(i).x = xcmt.getChildAt(i - 1).x +  xcmt.getChildAt(i - 1).width;
					xcmt.getChildAt(i).y = 0;
				}
				//多加一个组件,用来间隔首尾
//				var sper:VBox = new VBox();
//				sper.width = 20;
//				sper.height = xcmt.height;
//				xcmt.addChild(sper);
//				sper.x =  xcmt.getChildAt(i - 1).x +  xcmt.getChildAt(i - 1).width;
//				sper.y = 0;
			}
			
			//每当 Timer 对象达到根据 Timer.delay 属性指定的间隔时调度。
			private function timerHandler(evt:TimerEvent):void
			{
				moveTo();
			}
			
			//左移操作
			private function moveTo():void
			{
				
				for(var i:int = 0; i < xcmt.numChildren; i++)
				{
					xcmt.getChildAt(i).x -= moveWidth;
				}
				
				if(xcmt.getChildAt(0).x + xcmt.getChildAt(0).width <= 0)
				{
					xcmt.getChildAt(0).x = xcmt.getChildAt(xcmt.numChildren - 1).x + xcmt.getChildAt(xcmt.numChildren - 1).width;
					xcmt.setChildIndex(xcmt.getChildAt(0),xcmt.numChildren -1);
				}
				
			}
			
			public function timerStart():void
			{
				// TODO Auto-generated method stub
				trace("timer started !!!");
				if(timer && !timer.running)
				{
					timer.start();
				}
			}
			
			
			public function timerStop():void
			{
				if(timer && timer.running)
				{
					timer.stop();
				}
			}
			
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				if(moveWidth>=100)
				{
					moveWidth = 100;
					Alert.show("已经达到速度上限","提示",Alert.OK);
				}
				else
				{
					moveWidth +=10;
				}
				hs.value=moveWidth;
			}
			protected function down_clickHandler(event:MouseEvent):void
			{
				if(moveWidth<=10)
				{
					moveWidth = 10;
					Alert.show("已经达到速度下限","提示",Alert.OK);
				}
				else
				{
					moveWidth -=10
				}
				hs.value=moveWidth;
			}
			protected function changeSize():void
			{
			    moveWidth=hs.value;
				
			}
			
		]]>
	</mx:Script>
	<mx:Label text="合作伙伴:" fontWeight="bold" fontSize="14"/>
	<mx:Canvas id="xcmt" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" mouseOver="timerStop()" mouseOut="timerStart()">
	</mx:Canvas>
	<mx:Button click="button1_clickHandler(event)" id="up" label="加速"></mx:Button>
	<mx:Button click="down_clickHandler(event)" id="down" label="减速"></mx:Button>
	<mx:HSlider id="hs" change="changeSize()" minimum="0" maximum="100" value="10"  />
	<mx:ColorPicker/>
</mx:VBox>

测试类test.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*" xmlns:grid="com.gd.grid.*">
<grid:partnersGrid></grid:partnersGrid>

</s:Application>