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

深藏阁楼爱情的钟 2021-11-26 23:02 238阅读 0赞

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

不废话，上代码。

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>

效果图：

![161407282297682.jpg][]

转载于:https://www.cnblogs.com/loveFlex/p/4228559.html

[161407282297682.jpg]: /images/20211126/3a8242c729e8459e86d7a2d2c2704ad6.png