アクティビティ間の遷移を作成する

アクティビティは、ステータスの変更に対する遷移を定義するために State Manager を使用します。ステートマネージャーを作成して遷移を定義しない場合、アクティビティのステータス間の遷移は即時に行われます。

アクティビティ遷移タイプ

トランジションのアニメーションを見るには、そのトランジションの画像にカーソルを合わせてください。

基本

Instant

Plain

Crossfade

Fade Out Fade In

Flip Horizontal

Flip Vertical

ヒンジ (Hinge)

Hinge Bottom From Front

Hinge Bottom From Back

Hinge Left From Front

Hinge Left From Back

Hinge Right From Front

Hinge Right From Back

Hinge Top From Front

Hinge Top From Back

回転中心クロスフェード

Rotate Center Cross Fade

Rotate Center Top Cross Fade

Rotate Center Bottom Cross Fade

Rotate Center Left From Bottom Cross Fade

Rotate Center Left From Top Cross Fade

Rotate Center Right From Bottom Cross Fade

Rotate Center Right From Top Cross Fade

コーナークロスフェードを回転

Rotate Corner Top Left From Bottom Cross Fade

Rotate Corner Top Left From Top Cross Fade

Rotate Corner Bottom Left From Bottom Cross Fade

Rotate Corner Bottom Left From Top Cross Fade

Rotate Corner Top Right From Bottom Cross Fade

Rotate Corner Top Right From Top Cross Fade

Rotate Corner Bottom Right From Bottom Cross Fade

Rotate Corner Bottom Right From Top Cross Fade

アクティビティ間の遷移を追加する

アクティビティ間の遷移を追加するには:

  1. Activity Browser で、遷移を追加したいアクティビティを右クリックし、Add Transition とアクティビティ間の遷移に使用したい遷移を選択します。

    例えば、Flip Vertical を選択して、Kanzi がノードをそのノードの中心を水平に通る軸の周りで回転させるトランジションを作成します。

    このコマンドを実行すると、Kanzi Studio:

    • Library > State Managers に State Manager を作成し、ActivityState ステートグループを持ち、その Controller Property が Activity Status プロパティです。ステートグループには、アクティビティの異なるステータスにマップするステートが含まれています。

    • Activity で、Kanzi Studio が作成した State Manager に Resources > State Manager プロパティを設定します。

    ../../_images/activity-browser-flip-vertical.png ../../_images/media-activity-state-manager.png ../../_images/activity-state-manager-set.png
  2. すべての Activities に対して遷移を作成したい場合は、前のステップを繰り返します。アクティビティ間の遷移に同じ State Manager を使用したい場合は、それらのアクティビティで State Manager プロパティを同じ State Manager に設定します。

../../_images/vertical-transition.gif

アクティビティ間のカスタムトランジションを作成する

アクティビティ間の独自のトランジションを作成できます。

アクティビティ間のカスタムトランジションを作成するには:

  1. Activity Browser で、遷移を作成したい Activity を右クリックし、Add Transition > Plain を選択します。このコマンドを実行すると、Kanzi Studio:

    • ステートマネージャーを作成し、その Controller Property を Activity Status プロパティに設定します。ステートマネージャーには、アクティビティの異なるステータスにマップされる状態が含まれています。

    • Activity で、Kanzi Studio が作成した State Manager に Resources > State Manager プロパティを設定します。

    ../../_images/activity-browser-add-state-manager.png ../../_images/mytransition-state-manager.png ../../_images/mytransition-activity-state-manager-set.png
  2. すべての Activities に対して遷移を作成したい場合は、前のステップを繰り返します。アクティビティ間の遷移に同じ State Manager を使用したい場合は、それらのアクティビティで State Manager プロパティを同じ State Manager に設定します。

    ../../_images/mytransition-navigation-activity-state-manager-set.png ../../_images/plain-transition.gif
  3. Library > State Managers で、Kanzi Studio が最初のステップで作成した State Manager を選択し、各ステートにプロパティを追加して設定することでトランジションを定義します。

    例:

    • クロスフェードトランジションを作成するには、すべてのステートに Opacity プロパティを追加します。

      • Active、Activating、および Deactivating の状態では、それを1に設定します。

        ../../_images/mytransition-cross-fade-opacity-1.png ../../_images/mytransition-cross-fade-opacity-1-properties.png
      • Inactive ステートで、それを0に設定します。

        ../../_images/mytransition-cross-fade-opacity-0.png ../../_images/mytransition-cross-fade-opacity-0-properties.png
      ../../_images/cross-fade-transition.gif
    • フェードインフェードアウトのトランジションを作成するには、すべてのステートに Opacity プロパティを追加します。

      • Active と Deactivating の状態では、それを1に設定します。

        ../../_images/mytransition-fade-in-fade-out-opacity-1.png ../../_images/mytransition-cross-fade-opacity-1-properties.png
      • Activating と Inactive の状態で、それを0に設定します。

        ../../_images/mytransition-fade-in-fade-out-opacity-0.png ../../_images/mytransition-fade-in-fade-out-opacity-0-properties.png
      ../../_images/fade-out-fade-in-transition.gif

関連項目

チュートリアル: アクティビティ間のトランジションをアニメーション化する