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

このチュートリアルでは、アクティビティ間でアニメーション付きのトランジションを作成する方法を学びます。

このビデオはチュートリアルの結果を示しています。

../../_images/preview-show-activity-transitions-with-scaling-and-easing-function.gif

このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。

チュートリアルを入手する¶

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Activity transitions チュートリアルの横にあるダウンロードをクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

<KanziWorkspace>/Tutorials/Activity transitions/Start/Tool_project ディレクトリにある、チュートリアルの開始地点となるプロジェクト。

このプロジェクトの内容と、このようなプロジェクトの作成方法については、チュートリアル: アプリケーションUIの構造を参照してください。
<KanziWorkspace>/Tutorials/Activity transitions/Completed ディレクトリにある、完成したチュートリアル。

アクティビティ間にトランジションを追加する¶

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

このセクションでは、アクティビティ間のアニメーション付きトランジションを作成します。

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

Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Activity transitions チュートリアルの横にある Open をクリックし、Start project を選択します。

Activity Browser では、Cluster > Gauge View > GaugeViewActivityHost > LeftArea > MaximizedMinimizedSwitcher > MaximizedLeft > MaximizedWidget のエクスクルーシブアクティビティホストが、バッテリー、音楽、ナビゲーションウィジェットを表示するアクティビティを含んでいます。

Preview では、左側のボタンをクリックすることでアクティビティを切り替えることができます。アクティビティ間の遷移は即座に行われます。
Activity Browser で、WidgetBatteryMaximized アクティビティを右クリックし、Add Transition > Flip Horizontal を選択し、アニメーションステートマネージャーに Maximized Widget State Manager という名前を付けます。

Flip Horizontal トランジションは、アクティビティの中心を軸にした水平回転をアニメーション化します。

このコマンドを実行すると、Kanzi Studio:
- Library > State Managers に ActivityState ステートグループを持つ Maximized Widget State Manager を作成します。このステートグループの Controller Property は Activity Status プロパティです。ステートグループには、アクティビティの異なるステータスにマップされるステートが含まれています。
  
  例えば、Inactive ステートでは、アクティビティがその中心を軸に y 軸に沿って180度回転します。
- Prefabs > WidgetBatteryMaximized アクティビティプレハブで、Resources > State Manager プロパティを Maximized Widget State Manager に設定します。
Library > State Managers から、Maximized Widget State Manager を Prefabs にドラッグし、これらのアクティビティプレハブにドロップします。
- WidgetMusicMaximized
- WidgetNavigationMaximized
この方法で、MaximizedWidget エクスクルーシブアクティビティホスト内のすべてのアクティビティに Maximized Widget State Manager ステートマネージャーを追加します。同じステートマネージャーを使用して、エクスクルーシブアクティビティホスト内のすべてのアクティビティに同じ遷移アニメーションを適用します。

Preview で左側のボタンをクリックしてアクティビティを切り替えると、Kanzi がアニメーション付きの水平フリップトランジションを適用します。

../../_images/preview-show-activity-transitions.gif

複数のプロパティをアニメーション化するようにトランジションを調整する¶

前のセクションでは、事前定義されたアクティビティ遷移を追加しました。Kanzi がアクティビティ間の遷移をアニメーション化する際、各アクティビティは次の状態セットのいずれかを経由します。

Inactive --> Activating --> Active
Active --> Deactivating --> Inactive

Kanzi が各状態でアクティビティに適用するプロパティ値を設定できます。

このセクションでは、あなたは:

遷移中にアクティビティの不透明度をアニメーション化します。
アクティビティを同時に水平に反転させ、縮小して元のサイズに戻します。

複数のプロパティをアニメーション化するために遷移を調整するには:

Library > State Managers > Maximized Widget State Manager > ActivityState ステートグループで、Inactive ステートを選択します。Properties で：
- Perspective Transformation プロパティで、Scale プロパティフィールドを0.5に設定します。
- Node > Opacity プロパティを追加して0に設定します。
この方法で、Inactive ステートでは、アクティビティの寸法を元の値の半分に縮小し、アクティビティを完全に透明にします。
Active ステートを選択します。Properties で、Node > Opacity プロパティを追加して 1 に設定します。

この方法で、Active ステートでは、アクティビティを不透明にします。
Activating と Deactivating のステートを選択します。Properties で：
- Perspective Transformation プロパティで、Scale プロパティフィールドを0.5に設定します。
- Node > Opacity プロパティを追加して、0.2 に設定します。
この方法で、Activating および Deactivating の状態では、アクティビティの寸法を元の値の半分に縮小し、アクティビティをフェードアウトしたように見せます。

今、アクティビティ間を切り替えると、遷移アニメーション:

アクティビティを水平に反転します。
アクティビティを縮小し、元のサイズに戻します。
非アクティブ化されるアクティビティをフェードアウトし、アクティブ化されるアクティビティをフェードインします。

../../_images/preview-show-activity-transitions-with-scaling.gif

遷移のカーブと速度を調整する¶

Kanzi では、さまざまなイージング関数を使用して、よりリアルな遷移アニメーションを作成し、より快適なユーザーエクスペリエンスを提供できます。イージング関数はアニメーションカーブ、つまりプロパティ値が変化する速度を定義します。デフォルトで、Kanzi は線形イージング関数を使用します。

このセクションでは、最初に異なるイージング関数を使用してアクティビティのサイズ変更をアニメーション化します。その後、トランジションアニメーションの速度を調整します。

トランジションのカーブと速度を調整するには、以下のようにします。

Library > State Managers > Maximized Widget State Manager で、ActivityState ステートグループを選択します。Properties で、Activating --> Active ステートトランジションをクリックします。
State Transition Settings で、をクリックしてトランジションアニメーションを追加し、次のように設定します。
- Property Type から Perspective Transformation へ
- Easing Mode から Ease out へ
  
  この方法では、アニメーションを最初は速く開始し、その後速度を落とします。
  
  Ease out イージングモードは、デフォルトの Ease in イージングモードとは反対で、アニメーションがゆっくり始まり、その後速度が増すようにします。
- Easing Function から Back へ
  
  Back イージング関数は、アニメーションがターゲット値を超えて戻ることで、アニメーションにバウンドを作り出します。
- Amplitude を0.5に
  
  この方法で、Back イージング関数がアニメーションをターゲット値からどれだけ超過させるかを設定します。
Save をクリックします。

このトランジションアニメーションでは、アクティブ化するアクティビティのサイズを元のサイズを超えて増加させ、Active 状態で元のサイズに戻します。Kanzi は、アクティビティの不透明度と回転にデフォルトの線形トランジションアニメーションを適用します。
トランジションアニメーションの速度を調整するには、以下のようにします。
1. Properties で、Inactive --> Activating のステート遷移をクリックします。State Transition Settings で、Duration (ms) を200に設定し、Save をクリックします。
  
  この方法で、Inactive ステートから Activating ステートへの遷移の長さを200ミリ秒に設定します。
2. これらのステート遷移に対して前の手順を繰り返します:
  - Activating --> Active
  - Active --> Deactivating
  - Deactivating --> Inactive
アクティビティ間を切り替えるとき、Kanzi はより高速でトランジションをアニメーションします。