Flex中设置进度条(ProgressBar)完成时效果

以下的例子展示了当进度条完成(100%)时的一个效果

'; } else { whichEl.style.display = 'none'; sb.innerHTML=' 显示代码'; whichEl.witdh="300px"; } }   隐藏代码

DE<<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/15/setting-a-complete-effect-on-a-progressbar-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"         layout="vertical"         verticalAlign="middle"         backgroundColor="white">     <mx:Script>         <![CDATA[             private var timer:Timer;             private function init():void {                 timer = new Timer(10);                 timer.addEventListener(TimerEvent.TIMER, timer_timer);             }             private function timer_timer(evt:TimerEvent):void {                 progressBar.setProgress(progressBar.value + 1, 100);             }             private function progressBar_complete(evt:Event):void {                 timer.stop();             }             private function resetProgressBar():void {                 progressBar.setProgress(0, 100);                 progressBar.scaleX = 1.0; // 100%                 progressBar.scaleY = 1.0; // 100%                 progressBar.alpha = 1.0; // 100%             }             private function playProgressBar():void {                 resetProgressBar();                 timer.start();             }         ]]>     </mx:Script>     <mx:Parallel id="progressBar_completeEffect">         <mx:Fade alphaTo="0.0" />         <mx:Zoom zoomHeightTo="0" />     </mx:Parallel>     <mx:ApplicationControlBar dock="true">         <mx:Button label="Play"                 click="playProgressBar();" />         <mx:Button label="Reset"                 click="resetProgressBar();" />     </mx:ApplicationControlBar>     <mx:ProgressBar id="progressBar"             complete="progressBar_complete(event);"             completeEffect="{progressBar_completeEffect}"             mode="manual"             labelPlacement="center"             width="80%"             height="60%"             creationComplete="init();" /> </mx:Application> DE<

查看Demo演示

原创作者： peterd。翻译整理：一路风尘