当前位置:   article > 正文

在 Flex 中设置进度条(ProgressBar)完成时效果的例子_miniui加进度条

miniui加进度条
 下面的实例演示了如何设置进度条(ProgressBar)完成(100%)时的效果

效果演示:


完整代码:
<?xml version="1.0" encoding="utf-8"?>
<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>

查看MXML

PS. 这个博客blog.minidx.com 有个勤劳的家伙正在逐篇的翻译flexexamples.com上的例子。本站也有不少实例来自flexexamples.com,但都经过了整理,不是原文翻译,想看原文翻译的可以直接到blog.minidx.com看,本篇文章基本上直接来自那里,只是我自己重新编译了一下代码:)

此文已经被收录在 《Flex 3 常见组件使用技巧系列 》中,点此进入该主题。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/171057
推荐阅读
相关标签
  

闽ICP备14008679号