首页 > 代码库 > Flex【原创】首尾相连的循环文本滚动简单实现
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>
效果图：
Flex【原创】首尾相连的循环文本滚动简单实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。