パッケージ | mx.states |
クラス | public class Transition |
継承 | Transition Object |
言語バージョン: | ActionScript 3.0 |
製品バージョン: | Flex 3 |
ランタイムバージョン: | Flash Player 9, AIR 1.1 |
トランジションを定義するには、アプリケーションの transitions
プロパティを Transition オブジェクトの配列に設定します。
Transition クラスの toState
プロパティおよび fromState
プロパティを使用して、トランジションをトリガーするステート変更を指定します。 デフォルトでは、fromState
プロパティと toState
プロパティの両方が "*" に設定されます。つまり、ビューステートに対するすべての変更にトランジションが適用されます。
変更前のビューステートを明示的に指定するには、fromState
プロパティを使用します。変更後のビューステートを明示的に指定するには、toState
プロパティを使用します。 1 つのステート変更が 2 つのトランジションに一致する場合は、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
さらに例を参照
Defining transitions
Transition tips and troubleshooting
Example: Creating a transition effect
関連する API エレメント
mx.effects.RemoveChildAction
mx.effects.SetPropertyAction
mx.effects.SetStyleAction
プロパティ | 定義元 | ||
---|---|---|---|
autoReverse : Boolean = false
このトランジションが、正方向と逆方向の両方のビューステートの変更に適用されることを指定するには、true に設定します。 | Transition | ||
constructor : Object
指定されたオブジェクトインスタンスのクラスオブジェクトまたはコンストラクター関数への参照です。 | Object | ||
effect : IEffect
このトランジションを適用するときに再生する IEffect オブジェクトです。 | Transition | ||
fromState : String = "*"
トランジションを適用する場合に、変更前のビューステートを指定するストリングです。 | Transition | ||
interruptionBehavior : String = "end"
複数のトランジションを同時に再生することはできません。 | Transition | ||
toState : String = "*"
トランジションを適用する場合に、変更後のビューステートを指定するストリングです。 | Transition |
メソッド | 定義元 | ||
---|---|---|---|
コンストラクターです。 | Transition | ||
オブジェクトに指定されたプロパティが定義されているかどうかを示します。 | Object | ||
Object クラスのインスタンスが、パラメーターとして指定されたオブジェクトのプロトタイプチェーン内にあるかどうかを示します。 | Object | ||
指定されたプロパティが存在し、列挙できるかどうかを示します。 | Object | ||
ループ処理に対するダイナミックプロパティの可用性を設定します。 | Object | ||
ロケール固有の規則に従って書式設定された、このオブジェクトのストリング表現を返します。 | Object | ||
指定されたオブジェクトのストリング表現を返します。 | 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
の実際の値に関係なく、常に interruptionBehavior
プロパティが stop
に設定されている場合のように再生されます。
このプロパティがチェックされるのは、新しいトランジションが、現在再生中のトランジションとは正反対の方向に進行している場合のみです。 つまり、ステート A とステート B の間でトランジションが再生されている場合に、ステート A に戻るトランジションが開始された場合です。
トランジションが toState
プロパティと fromState
プロパティを使用して、ビューステート B から A へのトランジションを明示的に処理する場合、autoReverse
プロパティは無視されます。
デフォルト値: false。
関連する API エレメント
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 |
複数のトランジションを同時に再生することはできません。トランジションを再生中に新しいトランジションが発生すると、現在のトランジションは割り込まれます。 このプロパティは、割り込み時の現在のトランジションの動作方法を制御します。
デフォルトでは、現在のトランジションは終了します。つまり、トランジション内のすべてのエフェクトが終了値にスナップします。 これは、end
のプロパティ値に対応しています。 このプロパティの値が stop
の場合、現在のトランジションは現在の場所で停止します。 新しいトランジションは、前のトランジションの停止位置から再生を開始します。
stop
の値を指定すると、割り込まれたトランジションの外観を滑らかに処理できます。 これは、新しいトランジションが始まる前に、現在のトランジションが終了状態にスナップするのがユーザーに表示されないためです。
一部のケースでは、割り込むトランジションが、現在のトランジションの逆方向の場合もあります。例えば、ビューステート A からビューステート B へのトランジションを再生中に、逆方向のトランジションが発生して現在のトランジションに割り込む場合があります。 トランジションインスタンスの autoReverse
プロパティを true
に設定すると、同じトランジションを使用して、正方向と逆方向の両方のトランジションを処理できます。 割り込むトランジションが、現在のトランジションの逆方向のトランジションで、autoReverse
が true
に設定されている場合、割り込むトランジションは、interruptionBehavior
の実際の値に関係なく、interruptionBehavior
プロパティが stop
に設定されている場合のように実行されます。
mx.states.InterruptionBehavior クラスは、このプロパティの想定される値を定義します。
デフォルト値: end。
関連する API エレメント
toState | プロパティ |
public var toState:String = "*"
言語バージョン: | ActionScript 3.0 |
製品バージョン: | Flex 3 |
ランタイムバージョン: | Flash Player 9, AIR 1.1 |
トランジションを適用する場合に、変更後のビューステートを指定するストリングです。 デフォルト値は "*" で、任意のビューステートを意味します。
このプロパティは、基本ビューステートに対応する空のストリング "" に設定できます。
デフォルト値: "*"。
Transition | () | コンストラクター |
public function Transition()
言語バージョン: | ActionScript 3.0 |
製品バージョン: | Flex 3 |
ランタイムバージョン: | Flash Player 9, AIR 1.1 |
コンストラクターです。
<?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>
Tue Jun 12 2018, 10:34 AM Z