レイアウト変更の滑らかな切り替え

  • [アーティクル]

レイアウトのプロパティは、通常、独立した値 (行や列の番号など) に設定するか、自動値 (高さや幅) に設定します。このような種類のプロパティがスムーズに切り替わるようにするには、Fluid Layout を使います。たとえば、オブジェクトをある状態ではグリッド レイアウト パネルの左側のセルに表示し、別の状態ではレイアウト パネルの右側のセルに表示する場合、これらの 2 つの状態の切り替え効果は、状態グループで [Fluid Layout] をオンにし、切り替え効果の再生時間を増やさないと、瞬時に変更されます。

Ee341455.alert_note(JA-JP,Expression.30).gifメモ :

Fluid Layout はレイアウト プロパティのみに影響を及ぼします。

レイアウト変更をスムーズに切り替えるには

  1. 開いたドキュメントにオブジェクトを配置します。たとえば、3 列と 3 行からなる Grid オブジェクトで、セルの 4 つに異なるオブジェクトを配置します。

    Ee341455.067dbe1c-2246-4c0e-b9f2-2eb9ad082e5e(JA-JP,Expression.30).png

  2. [状態] パネルで、異なるビジュアル状態を定義して、その状態でのオブジェクトのレイアウト プロパティを変更します。たとえば、オブジェクトのそれぞれについて、2 行 2 列に渡って、右下隅にオブジェクトを表示する状態を定義します。

    Ee341455.198ca721-de5e-4d7d-85ab-97fbb02dcbc8(JA-JP,Expression.30).png

    状態の作成の詳細については、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」参照してください。

  3. [状態] パネルで、状態グループの [既定の切り替え効果] 時間を 1 秒に設定します。

  4. または、[EasingFunction] Ee341455.9718b395-a71d-40b2-9d08-8e29a225151f(JA-JP,Expression.30).png をクリックして、切り替え効果に適用するイージング関数を選択します。イージング関数を使用すると、アニメーションがリアルになります。たとえば、Bounce イージング関数は、跳ね返り効果を作成します。

  5. 状態間の変更を有効にするには、[アセット] パネルで [ビヘイビアー] カテゴリを選択して、[GoToStateAction] ビヘイビアーを左下隅のオブジェクトにドラッグします。

  6. [プロパティ] パネルで、[GoToStateAction] の [StateName] プロパティを左下隅のオブジェクトを移動する状態の名前に変更します。たとえば、[StateName ] を [Show1] に変更します。

    Ee341455.8d71b559-361b-4885-ad87-9d5537215514(JA-JP,Expression.30).png

    ビヘイビアーの詳細については、「ビヘイビアーをオブジェクトに追加」を参照してください。

  7. F5 キーを押してアプリケーションを実行し、グリッドの左下隅のオブジェクトをクリックして切り替え効果をテストします。切り替え効果時間を 1 秒に設定していたも、オブジェクトが瞬時に右下隅に移動します。

  8. [状態] パネルで、状態グループの [FluidLayout オン] Ee341455.04416d58-b1c8-4338-b8fc-9ed002ec88bc(JA-JP,Expression.30).png をクリックします。

  9. F5 キーを押してアプリケーションを実行し、グリッドの左下隅のオブジェクトをクリックして切り替え効果をもう一度テストします。オブジェクトは、1 秒かけて、右下隅にスムーズに移動します。

関連項目

タスク

ユーザー コントロールのビジュアル状態および切り替え時間の定義

概念

ビヘイビアーをオブジェクトに追加

グリッド レイアウト パネルの使用