如何利用遮罩实现动态划过

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				xmlns:view="com.hnisi.itsm.view.*"
				 height="100" autoDrawBackground="false" buttonMode="false"
				fontFamily="微软雅黑"
				creationComplete="itemrenderer1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import com.hnisi.screen.business.model.vo.BusinessKardVO;
			
			import mx.events.FlexEvent;
			
			[Bindable]
			private var busiCi:BusinessKardVO
			protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
			{
				/* var timer:Timer = new Timer(2000,0);
				timer.addEventListener(TimerEvent.TIMER, function onTimer(event:TimerEvent):void{
					maskMove.play();
				}); 
				timer.start(); */
				maskMove.play();
			}
			
			protected function onCreationComplete(event:FlexEvent):void
			{
				
			}
			
			override public function set data(value:Object):void{
				super.data = value;
				if(value is BusinessKardVO){
					this.busiCi = value as BusinessKardVO; 
				}
//				gradientEntry1.color = data.systemHealth > 60 ? 0x60F300 : (data.systemHealth < 30 ? 0xed0000 :0xffa200);
//				gradientEntry2.color = data.systemHealth > 60 ? 0x008605 : (data.systemHealth < 30 ? 0x830000 :0x9f3100);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<mx:Move id="maskMove" duration="1000" target="{maskGroup}" xFrom="-10" xTo="55" repeatCount="0"/>
		<fx:String id="pathString">
			M 5 8 L 7 6L 10 5 L 13 9 L 15 7 L 17 10 L 20 20 L 23 10 L 25 6 L 30 5 L 33 15 L 35 15 L 37 8 L 40 18 L 43 8 L 45 25  L 47 13 L 50 15 L 53 19 L 55 10
		</fx:String>
		<!--<s:Path id="randomPath" data=""/>-->
	</fx:Declarations>
	<s:states>
		<s:State name="normal"/>
		<s:State name="selected"/>
		<s:State name="disabled"/>
	</s:states>
	<!--<s:Label text="{data}"/>-->
	<s:Group left="0" right="0" top="0" bottom="0">
		<s:Rect left="0" right="0" top="0" bottom="0">
			<s:fill>
				<s:SolidColor color="#0058A0"/>
			</s:fill>
		</s:Rect>
		
		<s:Rect left="4" right="4" top="4" bottom="4">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="#09579d" alpha.selected="0.5"/>
					<s:GradientEntry color="#092a4e" ratio="0.6" alpha.selected="0.5"/>
					<s:GradientEntry color="#023564" alpha.selected="0.5"/>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
		
		<s:Rect left="4" right="4" top="4" bottom="4">
			<s:stroke>
				<s:SolidColorStroke color="#001740" color.selected="white">
				</s:SolidColorStroke>
			</s:stroke>
		</s:Rect>
		<s:HGroup left="8" top="8" verticalAlign="middle">
			<s:Image id="person"
					 source="resource/images/icon_person.png"/>
			<s:Label id="ciNameLabel" color="0xffffff" text="{busiCi.ciName}" />
		</s:HGroup>
		
		<s:VGroup left="8" right="8" top="20" bottom="4" verticalAlign="middle">
			<s:Label color="white" text="系统健康度"/>
			<s:Group id="statusGroup">
				<s:Rect width="150" top="0" bottom="0" topLeftRadiusX="5" topRightRadiusX="5"
						bottomLeftRadiusX="5" bottomRightRadiusX="5">
					<s:fill>
						<s:LinearGradient rotation="90">
							<s:GradientEntry id="gradientEntry1" color="0x60F300"/> 
							<s:GradientEntry id="gradientEntry2" color="0x008605"/>
						</s:LinearGradient>
					</s:fill>
				</s:Rect>
				<s:Path id="path" data="{pathString}">
					<s:stroke>
						<s:SolidColorStroke color="0" alpha="0.3"/>
					</s:stroke>
				</s:Path>
				
				<s:Path data="{pathString}" mask="{maskGroup}">
					<s:stroke>
						<s:SolidColorStroke color="white"/>
					</s:stroke>
				</s:Path>
				
				<s:Group id="maskGroup" height="100%" width="5">
					<s:Rect width="100%" height="100%">
						<s:fill>
							<s:SolidColor color="0xffffff"/>
						</s:fill>
					</s:Rect>
				</s:Group>
				<s:Label id="systemHealthLabel" color="0xffffff" text="{busiCi.healthScore}" verticalCenter="0" x="{path.width+12}"/>
			</s:Group>
			<!--<s:VGroup horizontalCenter="0" verticalCenter="0">
				<s:HGroup>
				</s:HGroup>
			</s:VGroup>-->
		</s:VGroup>
	</s:Group>
	
</s:ItemRenderer>