Flex【原创】首尾相连的循环文本滚动简单实现

思路比较简单，准备一个主文本的副本用于辅助滚动，当主文本滚动出界时辅助文本开始滚动。

不废话，上代码。

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3                xmlns:s="library://ns.adobe.com/flex/spark"
  4                xmlns:mx="library://ns.adobe.com/flex/mx"
  5                frameRate="60"
  6                applicationComplete="applicationCompleteHandler(event)">
  7
  8     <fx:Style>
  9         @namespace s "library://ns.adobe.com/flex/spark";
 10         @namespace mx "library://ns.adobe.com/flex/mx";
 11         s|Label
 12         {
 13             fontFamily:‘Microsoft Yahei‘;
 14             fontSize:12;
 15         }
 16     </fx:Style>
 17
 18     <fx:Script>
 19         <![CDATA[
 20             import mx.events.EffectEvent;
 21             import mx.events.FlexEvent;
 22
 23             import spark.effects.easing.Linear;
 24
 25             private var fromX:Number
 26             private var spew:Number;
 27             private var duration:Number = 30000;
 28
 29             protected function applicationCompleteHandler(event:FlexEvent):void
 30             {
 31                 masker.graphics.beginFill(0,1);
 32                 masker.graphics.drawRect(-textContainer.width/2,-textContainer.height/2,textContainer.width,textContainer.height);
 33                 masker.graphics.endFill();
 34                 textContainer.mask = masker;
 35
 36                 spew = textContainer.width - textGroup.width;
 37
 38                 fromX = -textGroup2.width;
 39                 textGroup.x = fromX;
 40                 textGroup2.x = fromX;
 41
 42                 moveEff.duration = duration;
 43                 moveEff.xTo = textContainer.width;
 44                 moveEff.play();
 45             }
 46
 47             protected function moveEff_effectUpdateHandler(event:EffectEvent):void
 48             {
 49                 if(textGroup.x >= spew)
 50                 {
 51                     if(!moveEff2.isPlaying)
 52                     {
 53                         moveEff2.duration = duration;
 54                         moveEff2.xTo = textContainer.width;
 55                         moveEff2.play();
 56                     }
 57                 }
 58             }
 59
 60             protected function moveEff_effectEndHandler(event:EffectEvent):void
 61             {
 62                 textGroup.x = fromX;
 63             }
 64
 65             protected function moveEff2_effectUpdateHandler(event:EffectEvent):void
 66             {
 67                 if(textGroup2.x >= spew)
 68                 {
 69                     if(!moveEff.isPlaying)
 70                     {
 71                         moveEff.duration = duration;
 72                         moveEff.xTo = textContainer.width;
 73                         moveEff.play();
 74                     }
 75                 }
 76             }
 77
 78             protected function moveEff2_effectEndHandler(event:EffectEvent):void
 79             {
 80                 textGroup2.x = fromX;
 81             }
 82
 83         ]]>
 84     </fx:Script>
 85     <fx:Declarations>
 86         <s:Move id="moveEff" target="{textGroup}" easer="{new Linear(0,0)}"
 87                 effectUpdate="moveEff_effectUpdateHandler(event)"
 88                 effectEnd="moveEff_effectEndHandler(event)"/>
 89         <s:Move id="moveEff2" target="{textGroup2}" easer="{new Linear(0,0)}"
 90                 effectUpdate="moveEff2_effectUpdateHandler(event)"
 91                 effectEnd="moveEff2_effectEndHandler(event)"/>
 92     </fx:Declarations>
 93     <s:SpriteVisualElement id="masker" verticalCenter="0" horizontalCenter="0" mouseEnabled="false"/>
 94     <s:BorderContainer width="600" height="480" verticalCenter="0" horizontalCenter="0">
 95         <s:Group id="textContainer" width="100%" height="100%" left="3" top="3" bottom="3" right="3">
 96
 97             <s:HGroup id="textGroup2"
 98                       mouseOver="moveEff2.pause();moveEff.pause()"
 99                       mouseOut="moveEff2.resume();moveEff.resume()">
100                 <s:Button label="我在滚动吗"/>
101                 <s:Button label="文本循环滚动"/>
102                 <s:Button label="文本滚动"/>
103                 <s:Button label="头尾相连的滚动"/>
104                 <s:Button label="你说我是不是在滚动"/>
105             </s:HGroup>
106
107             <s:HGroup id="textGroup"
108                       mouseOver="moveEff.pause();moveEff2.pause()"
109                       mouseOut="moveEff.resume();moveEff2.resume()">
110                 <s:Button label="我在滚动吗"/>
111                 <s:Button label="文本循环滚动"/>
112                 <s:Button label="文本滚动"/>
113                 <s:Button label="头尾相连的滚动"/>
114                 <s:Button label="你说我是不是在滚动"/>
115             </s:HGroup>
116
117         </s:Group>
118     </s:BorderContainer>
119 </s:Application>

效果图：