Flex中如何利用as代码mx:sequence标签实现顺序效果（Sequence effects）

最新推荐文章于 2015-07-08 15:45:31 发布

原创最新推荐文章于 2015-07-08 15:45:31 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #import #application #button #function #encoding

本文介绍了一种使用Adobe Flex实现淡入淡出及右滑动效果的方法。通过Fade和WipeRight类结合Pause类来控制动画的暂停时间，利用Sequence类组织动画流程。用户可通过滑块调整暂停时长。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.effects.Fade;
            import mx.effects.Pause;
            import mx.effects.Sequence;
            import mx.effects.SetPropertyAction;
            import mx.effects.WipeRight;

            private var fader:Sequence;
            private var wiper:Sequence;

            private function fade_click():void {
                var fadeIn:Fade = new Fade();
                fadeIn.alphaFrom = 0.0;
                fadeIn.alphaTo = 1.0;

                var fadeOut:Fade = new Fade();
                fadeOut.alphaFrom = 1.0;
                fadeOut.alphaTo = 0.0;

                var pause:Pause = new Pause();
                pause.duration = slider.value;

                fader = new Sequence();
                fader.addChild(fadeIn);
                fader.addChild(pause);
                fader.addChild(fadeOut);

                fader.stop();
                fader.play([box]);
            }

            private function wipe_click():void {
                var wipeIn:WipeRight = new WipeRight();
                wipeIn.showTarget = true;

                var wipeOut:WipeRight = new WipeRight();
                wipeOut.showTarget = false;

                var pause:Pause = new Pause();
                pause.duration = slider.value;

                var alphaOn:SetPropertyAction = new SetPropertyAction();
                alphaOn.name = "alpha";
                alphaOn.value = 1.0;

                var alphaOff:SetPropertyAction = new SetPropertyAction();
                alphaOff.name = "alpha";
                alphaOff.value = 0.0;

                wiper = new Sequence();
                wiper.addChild(alphaOn);
                wiper.addChild(wipeIn);
                wiper.addChild(pause);
                wiper.addChild(wipeOut);
                wiper.addChild(alphaOff);

                wiper.stop();
                wiper.play([box]);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="fade box"
                click="fade_click();" />
        <mx:Button label="wipe box"
                click="wipe_click();" />

        <mx:Spacer width="100%" />

        <mx:Label text="effect pause ({slider.value} ms):" />
        <mx:HSlider id="slider"
                minimum="1000"
                maximum="3000"
                value="1500"
                labels="[1000,2000,3000]"
                liveDragging="true"
                showTrackHighlight="true"
                snapInterval="100"
                tickInterval="500"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Box id="box"
            width="100%"
            height="100%"
            backgroundColor="haloSilver"
            alpha="0.0" />

</mx:Application>