Transition

包	mx.states
类	public class Transition
继承	Transition Object

语言版本:

ActionScript 3.0

产品版本:

Flex 3

运行时版本:

Flash Player 9, AIR 1.1

Transition 类定义了一组在响应视图状态更改时播放的效果。视图状态的定义定义了如何更改状态，而过渡则定义了在状态更改过程中可视更改发生的顺序。

要定义过渡，可将应用程序的 transitions 属性设置为 Transition 对象的数组。

可使用 Transition 类的 toState 和 fromState 属性来指定触发过渡的状态更改。默认情况下，fromState 和 toState 属性均设置为“*”，表示将过渡应用到视图状态的任何更改。

可以使用 fromState 属性来明确指定要从中进行更改的视图状态，使用 toState 属性来明确指定要更改到的视图状态。如果状态更改和两个过渡匹配，则 toState 属性优先于 fromState 属性。如果超过一个过渡匹配，Flex 将使用过渡数组中的第一个定义。

可以使用 effect 属性来指定应用过渡时要播放的 Effect 对象。通常，它是一个包含多个效果的复合效果对象（如 Parallel 或 Sequence 效果），如下例所示：

 
  <mx:Transition id="myTransition" fromState="*" toState="*">
    <mx:Parallel>
        ...
    </mx:Parallel>
  </mx:Transition>

MXML 语法

隐藏 MXML 语法

The <mx:Transition> tag defines the following attributes:

  <mx:Transition
    Properties
    id="ID"
    effect=""
    fromState="*"
    toState="*"
    autoReverse="false"
  />

默认 MXML 属性effect

查看示例

	属性	由以下参数定义
		autoReverse : Boolean = false 设置为 true 以指定该过渡应用于正向和逆向视图状态更改。	Transition
		constructor : Object 对类对象或给定对象实例的构造函数的引用。	Object
		effect : IEffect 应用过渡时要播放的 IEffect 对象。	Transition
		fromState : String = "*" 该字符串指定在应用过渡时要从中进行更改的视图状态。	Transition
		interruptionBehavior : String = "end" Flex 不支持同时播放多个过渡。	Transition
		toState : String = "*" 该字符串指定在应用过渡时要更改到的视图状态。	Transition

	方法	由以下参数定义
		Transition() 构造函数。	Transition
		hasOwnProperty(name:String):Boolean 表示对象是否已经定义了指定的属性。	Object
		isPrototypeOf(theClass:Object):Boolean 表示 Object 类的实例是否在指定为参数的对象的原型链中。	Object
		propertyIsEnumerable(name:String):Boolean 表示指定的属性是否存在、是否可枚举。	Object
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void 设置循环操作动态属性的可用性。	Object
		toLocaleString():String 返回此对象的字符串表示形式，其格式设置遵守区域设置特定的约定。	Object
		toString():String 返回指定对象的字符串表示形式。	Object
		valueOf():Object 返回指定对象的原始值。	Object

autoReverse

属性

public var autoReverse:Boolean = false

语言版本:

ActionScript 3.0

产品版本:

Flex 3

运行时版本:

Flash Player 9, AIR 1.1

设置为 true 以指定该过渡应用于正向和逆向视图状态更改。因此，对于从视图状态 A 到视图状态 B 的更改以及从视图状态 B 到视图状态 A 的更改，使用该过渡。

正在播放从视图状态 A 到视图状态 B 的过渡时，可以发生逆向过渡以中断当前过渡。逆向过渡总是在当前过渡的当前位置将其终止。也就是说，逆向过渡始终播放，好像 interruptionBehavior 属性已设置为 stop，而忽略 interruptionBehavior 的实际值。

仅当新过渡以与当前正在播放的过渡完全相反的方向播放时，此属性才会选中。也就是说，如果某个过渡正在状态 A 和 B 之间播放，则开始一个返回到状态 A 的过渡。

如果过渡使用 toState 和 fromState 属性显式处理从视图状态 B 到视图状态 A 的过渡，则 Flex 忽略 autoReverse 属性。

默认值为 false。

effect

属性

public var effect:IEffect

语言版本:

ActionScript 3.0

产品版本:

Flex 3

运行时版本:

Flash Player 9, AIR 1.1

应用过渡时要播放的 IEffect 对象。通常，它是一个包含多个效果的复合效果对象（如 Parallel 或 Sequence 效果）。

effect 属性是 Transition 类的默认属性。如果使用 MXML 标签语法，则可省略 <mx:effect> 标签。

fromState

属性

public var fromState:String = "*"

语言版本:

ActionScript 3.0

产品版本:

Flex 3

运行时版本:

Flash Player 9, AIR 1.1

该字符串指定在应用过渡时要从中进行更改的视图状态。默认值为“*”，表示任何视图状态。

可以将该属性设置为空字符串“”，它对应于基本视图状态。

默认值为 "*"。

interruptionBehavior

属性

public var interruptionBehavior:String = "end"

语言版本:

ActionScript 3.0

产品版本:

Flex 4.5

运行时版本:

Flash Player 10.2, AIR 2.5

Flex 不支持同时播放多个过渡。如果当前正在播放一个过渡，则发生一个新过渡时，将中断该当前过渡。该属性控制当前过渡中断时的行为方式。

默认情况下，当前过渡结束，并且过渡中的所有效果到达其结束值。这与 end 的属性值相对应。如果此属性的值为 stop，则当前过渡在其当前位置终止。新过渡从上一个过渡的终止位置开始播放。

stop 的值可以平滑中断的过渡的外观。这是因为在新过渡开始之前用户没有看到当前过渡到达其结束状态。

在某些情况下，中断过渡可以是当前过渡的逆向过渡。例如，正在播放从视图状态 A 到视图状态 B 的过渡时，发生逆向过渡以中断当前过渡。如果将过渡实例的 autoReverse 属性设置为 true，可以使用相同过渡同时处理正向和逆向过渡。如果中断过渡是当前过渡的逆向过渡，并且将 autoReverse 设置为 true，则中断过渡运行，好像 interruptionBehavior 属性已设置为 stop，而忽略 interruptionBehavior 的实际值。

mx.states.InterruptionBehavior 类定义此属性的可能值。

默认值为 end。

toState

属性

public var toState:String = "*"

语言版本:

ActionScript 3.0

产品版本:

Flex 3

运行时版本:

Flash Player 9, AIR 1.1

该字符串指定在应用过渡时要更改到的视图状态。默认值为“*”，表示任何视图状态。

可以将该属性设置为空字符串“”，它对应于基本视图状态。

默认值为 "*"。

构造函数详细信息

()

构造函数

public function Transition()

语言版本:

ActionScript 3.0

产品版本:

Flex 3

运行时版本:

Flash Player 9, AIR 1.1

构造函数。

示例如何使用本示例

TransitionExample.mxml

<?xml version="1.0" ?>
<!-- Simple example to demonstrate the Transition class. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" currentState="Login">
 
    <!-- Define the view states -->
    <s:states>
        <s:State name="Login" />
        <s:State name="Register" />
    </s:states>

    <s:transitions>
        <!-- Define the transition from the base state to the Register state.-->
        <s:Transition id="toRegister" fromState="*" toState="Register">
            <s:Sequence targets="{[loginPanel, registerLink, confirm, loginLink]}">
                <s:RemoveAction />
                <s:Fade />
                <s:SetAction target="{loginPanel}" property="title" />
                <s:SetAction target="{loginButton}" property="label" />
                <s:SetAction target="{loginButton}" property="color" />
                <s:Resize target="{loginPanel}"/>
                <s:AddAction />
                <s:Fade />
            </s:Sequence>
        </s:Transition>

        <!-- Define the transition from the Register state to the base state.-->
        <s:Transition id="toDefault" fromState="Register" toState="*">
            <s:Sequence targets="{[loginPanel, registerLink, 
                    confirm, loginLink]}">
                <s:RemoveAction/>
                <s:SetAction target="{loginPanel}" property="title"/>
                <s:SetAction  target="{loginButton}" property="label"/>
                <s:SetAction target="{loginButton}" property="color"/>
                <s:Resize target="{loginPanel}"/>
                <s:AddAction/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>

    <!-- Define a Panel container that defines the login form. The title of the Panel
         changes depending on the state. -->
    <s:Panel title="Login" title.Register="Register" id="loginPanel" 
            width="75%" horizontalCenter="0" verticalCenter="0">
    <s:controlBarLayout >
        <s:BasicLayout />
    </s:controlBarLayout>
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10" />
    </s:layout>
        <s:Label color="blue" width="100%"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

        <!-- The following form has  two TextInputs in the Login state and three TextInputs
             in the Register state. -->
        <s:Form id="loginForm" >
            <s:FormItem label="Username:">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem label="Password:">
                <s:TextInput/>
            </s:FormItem>
            <s:FormItem id="confirm" label="Confirm:" includeIn="Register" includeInLayout="false" includeInLayout.Register="true">
                <s:TextInput/>
            </s:FormItem>
        </s:Form>
       
        <!-- The controlBar includes two visible items in each state. Which LinkButton is visible is determined
             by the state -->
        <s:controlBarContent>
            <mx:LinkButton id="registerLink"  label="Need to Register?" top="10" bottom="10"
                click="currentState='Register'" left="10" includeIn="Login" />
            <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''" includeIn="Register" left="10"  top="10" bottom="10"/>
            <s:Button label="Login" label.Register="Register" id="loginButton" right="10" color.Register="0x0000FF"  top="10" bottom="10"/>
        </s:controlBarContent>
    </s:Panel>
</s:Application>

法律声明 | 在线隐私策略

Transition - AS3 Flex

包x

语言元素

附录

包 mx.states

autoReverse

effect

fromState

interruptionBehavior

toState

Transition