FLEX 效果过滤器

效果过滤器

默认情况下，Flex会对所有Transition所指定的视图模式进行效果响应，然而有些时候我们往往不希望所有的目标组件都执行这样的效果，而是能够动态地对效果进行过滤，更有时会出于效率方面的原因，希望屏蔽掉某些组件的效果，这时我们需要对Transition进行效果过滤。

在Transition中定义效果对象，可以使用filter属性指定过滤器，这样可以在执行效果响应时控制目标组件的状态选择。filter属性所指定的效果过滤器会在目标组件触发效果时生效，因此即使不使用视图模式，也可以为可视化组件设置效果过滤器属性，实现对某些特定组件的效果过滤。

效果过滤器在可视化组件的应用中，一种典型的使用方法就是屏蔽掉当前隐藏掉的组件的效果处理，因为我们往往对某一批组件进行统一的效果处理，而这些组件中的一部分甚至绝大部分在某一时刻处于隐藏状态，这种状态不需要对这些组件进行任何与外观相关的操作，效果处理也不例外，因此，有必要将这些组件的效果响应过滤掉，从而提高应用程序的执行效率。

效果过滤器通过filter属性支持下列状态过滤。

          _{add：允许当前视图中添加组件时执行效果。}

          _{hide：允许当前视图中隐藏状态的组件执行效果。}

          _{move：允许当前视图中移动状态的组件执行效果。}

          _{remove：允许当前视图中删除组件时执行效果。}

          _{resize：允许当前视图中大小变化的组件执行效果。}

          _{show：允许当前视图中显示状态的组件执行效果。}

示例3.9  使用效果过滤器

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:states>

    <mx:State>

        <mx:SetProperty target="{p1}" value="false"/>

        <mx:SetProperty target="{p2}" value="true"/>

        <mx:SetProperty target="{p3}" value="true"/>

        <mx:SetProperty target="{p2}" value="0"/>

        <mx:SetProperty target="{p2}" value="0"/>

        <mx:SetProperty target="{p3}" value="0"/>

        <mx:SetProperty target="{p3}" value="110"/>

    </mx:State>

    <mx:State>

        <mx:SetProperty target="{p1}" value="true"/>

        <mx:SetProperty target="{p2}" value="false"/>

        <mx:SetProperty target="{p3}" value="true"/>

        <mx:SetProperty target="{p1}" value="0"/>

        <mx:SetProperty target="{p1}" value="110"/>

        <mx:SetProperty target="{p3}" value="0"/>

        <mx:SetProperty target="{p3}" value="0"/>

    </mx:State>

</mx:states>

<mx:transitions>

    <mx:Transition fromState="*" toState="*">

        <mx:Sequence targets="{[p1,p2,p3]}">

            <mx:Sequence filter="hide" >

                <mx:WipeUp/>

                <mx:SetPropertyAction value="false"/>

            </mx:Sequence>

            <mx:Move filter="move"/>

            <mx:Sequence filter="show" >

                <mx:SetPropertyAction value="true"/>

                <mx:Fade/>

            </mx:Sequence>

        </mx:Sequence>

    </mx:Transition>

</mx:transitions>

<mx:Canvas width="100%" height="100%">

<mx:Panel title="收件箱" x="0" y="0" fontSize="12" width="200"

height="100" click="currentState=''" >

    <mx:List width="100%" height="100%">

        <mx:Array>

            <mx:String>1.来自 Ian.</mx:String>

            <mx:String>2.天气预报.</mx:String>

            <mx:String>3.来自 Zoe.</mx:String>

        </mx:Array>

    </mx:List>

</mx:Panel>

<mx:Panel title="发件箱" x="0" y="110" fontSize="12" width="200"

height="100" click="currentState='Two'" >

    <mx:List width="100%" height="100%">

        <mx:Array>

            <mx:String>1.发往 Ian.</mx:String>

            <mx:String>2.发往 Zoe.</mx:String>

        </mx:Array>

    </mx:List>

</mx:Panel>

<mx:Panel title="草稿箱" visible="false" fontSize="12" width="200"

height="100" click="currentState='Three'" >

    <mx:List width="100%" height="100%">

        <mx:Array>

            <mx:String>1.申请.</mx:String>

        </mx:Array>

    </mx:List>

</mx:Panel>

</mx:Canvas>

</mx:Application>

示例3.9创建了一个信箱界面，包含三个视图模式，分别是收件箱、发件箱和草稿箱。每种模式都会显示两个组件，而隐藏掉另一个组件，这样可以通过点击下方的组件进行视图状态切换。不难看出，整个视图切换的流程是一个固定的循环，因此使用Transition来进行控制会非常方便，但是每次需要显示和隐藏的视图是在不停变化的，设置成固定的效果模式并不能满足要求。这时，我们就可以使用效果过滤器来进行处理。

示例中，对两个效果稽核Sequence分别定义了不同的过滤器，当目标组件隐藏时，执行id为sequence1的效果集，当目标组件显示时，则执行id为sequence2的效果集。即组件从显示到隐藏会执行WipeUp的效果，而从隐藏到显示则会执行Fade的效果。示例的运行效果如图3.15所示。

 

图3.15  使用效果过滤器