プロパティの変更をアニメーション化する

アニメーションを作成するには、アニメーション化するプロパティに適切なアニメーションタイプを使用し、必要な動作のタイプに応じてアニメーションを適用します。

アニメーションコンポーネントをComponents >Default Components >Animation からNavigator または2D ビューにドラッグして、それらのインスタンスを作成することができます。

異なるアニメーション技法を使用しても、同様の結果を得ることができます。詳細は、アニメーションの追加を参照してください。

アニメーションの適用

プロパティの値が変化すると、プロパティアニメーションが適用されます。色と数のアニメーションは、特定の目的のためのプロパティ・アニメーション・タイプです。アニメーションの設定は、Properties >Animation Targets で指定します。

色の変化をアニメートする

たとえば、RectangleコンポーネントのインスタンスのColor プロパティの値にアニメーショ ンを適用して、ミリ秒単位で指定した期間にわたって、その値を現在の色から別の色に変更する ことができます。

1. 2D ビューにColor Animation コンポーネントのインスタンスを作成します。
2. Properties >Animation Targets に進みます。
3. Target で、アニメートするコンポーネントを選択します。
4. Property で、アニメートするプロパティを入力します。複数のプロパティをアニメートするには、カンマで区切ります。

   

5. Color Animation セクションで、元の色をFrom color で、新しい色をTo color で選択します。
6. Animation セクションで、Duration にアニメーションの継続時間を設定します。

数値の変化のアニメーション

同様に、プロパティの数値が変化したときにアニメーションを適用するには、Number Animation コンポーネントのインスタンスを作成します。

1. Properties >Number Animation に進みます。

   

2. 元の値をFrom で選択し、新しい値をTo で選択する。
3. Animation セクションで、Duration にアニメーションの継続時間を設定します。

たとえば、RectangleインスタンスのX プロパティの値にアニメーションを適用して、x 軸上の現在の位置から、ミリ秒単位で指定した時間にわたって別の位置に移動しているように見せることができます。コンポーネントを x 軸と y 軸の両方で移動して見せるには、Properties フィールドに x と y をカンマで区切って入力します。

プロパティのアニメーションを使用して、コンポーネントのスケールと不透明度をアニメーション化する例については、コーヒーマシンの例を参照してください。

アニメーションしないプロパティの設定

プロパティの変更をアニメーション化せずに、アニメーション中にプロパティの値を即座に変更するには、次のようにします：

1. Navigator にProperty Action コンポーネントのインスタンスを作成します。
2. Properties > に移動します。Property Action

   

3. Value フィールドに値を設定します。

これは、アニメーション中にアニメーション化されていないプロパティ値を設定するのに便利です。

たとえば、Number Animation コンポーネントのインスタンスの周囲に、Property Action コンポーネントのインスタンスを 2 つ含む、Sequential Animation コンポーネントのインスタンスを作成できます。最初のプロパティ・アクションは、RectangleのOpacity プロパティを0.5 に設定し、数値アニメーションは画像の幅を変更し、2 番目のプロパティ・アクションは不透明度を1 に戻します。

アニメーションの再生

アニメーションを再生するための設定を指定するには、Properties >Animation に進みます。

アニメーションを自動的に実行するには、Running を選択します。アニメーションは、Duration フィールドで指定した時間だけ実行されます。

アニメーションの実行プロパティをコンポーネントが発するシグナルに接続して、ユーザーがボタンを選択したときなどにアニメーションを再生することができます。詳しくは、コンポーネントとシグナルの接続を参照してください。

アニメーションをループで複数回再生するには、Loops フィールドに再生回数を設定します。値を-1に設定すると、アニメーションは明示的に停止されるまで継続的に繰り返されます。

アニメーションが停止したときに、完了まで実行するように指定するには、Run to end を選択します。この動作は、Loops プロパティが設定されている場合に最も便利です。アニメーションは正常に再生を終了しますが、再開はしません。

コンポーネントに定義されたすべてのアニメーションは、グループとして管理するためにParallel Animation またはSequential Animation コンポーネントに含めない限り、並行して実行されます。

アニメーションを一時停止するには、 (Paused) を選択します。

アニメーションにイージングカーブを付けるには、Easing Curve フィールドで (Easing Curve Editor) ボタンを選択します。

アニメーションのグループを再生する

複数のアニメーションを作成し、並列または順番に再生する ことができます。

同時に再生するアニメーションのグループを管理するには：

1. Navigator にParallel Animation コンポーネントのインスタンスを作成します。
2. 他のアニメーションをそこにドラッグします。

アニメーションを指定された順序で次々に再生するには、Sequential Animation のインスタンスを作成します。

例えば、バナーコンポーネントには、表示するアイコンやスローガンがいくつかあり、それを次々に表示することができます。Opacity プロパティの値は、不透明なオブジェクトを示す1.0 に変わる可能性があります。シーケンシャル・アニメーションを使用すると、各不透明アニメーションは前のアニメーションが終了した後に再生されますが、パラレル・アニメーションを使用すると、アニメーションは同時に再生されます。

個々のアニメーションを並列アニメーションや順次アニメーションのグループに配置した場合、それらを個別に開始したり停止したりすることはできなくなります。グループとして開始、停止する必要があります。

グループ化されたアニメーション間にポーズを追加する

Sequential Animation で使用する場合、Pause Animation は、指定した時間、何も起こらないステップです。

つのアニメーションの間に一時停止を指定するには：

1. Navigator のSequential Animation 内にPause Animation コンポーネントのインスタンスを作成します。
2. Properties >Animation に移動します。
3. Paused を選択します。
4. Duration フィールドで一時停止の時間を設定します。

パフォーマンスに関する考察

UIでは、視覚効果だけでなく、流動性や動的なトランジションも効果的に使うことができます。しかし、サポートされている機能のいくつかは、UI のパフォーマンスに影響を与える可能性があるため、使用する際にはいくつかの注意が必要です。

一般的に、プロパティをアニメーションさせると、そのプロパティを参照するバインディングが再評価されます。通常は、これが望ましいのですが、場合によっては、アニメーションを実行する前にバインディングを無効にし、アニメーションが完了したらバインディングを再割り当てした方がよいこともあります。

アニメーション中にJavaScriptを実行することは避けてください。例えば、x プロパティのアニメーションの各フレームに対して複雑な JavaScript 式を実行することは避けるべきです。

スクリプトアニメーションはメインスレッドで実行されるため、完了までに時間がかかりすぎるとフレームがスキップされる可能性があるため、Script Action コンポーネントのインスタンスを作成する際には特に注意してください。

アニメーションコンポーネントの概要

以下の表は、コンポーネントのプロパティをプログラムでアニメーションさせるために使用できるコンポーネントの一覧です。こ れ ら はComponents >Default Components >Animation で利用可能です。