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

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

「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 をコンマで区切って入力します。

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

アニメーション対象外のプロパティの設定

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

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 ] フィールドで指定した時間だけ実行されます。

アニメーションの「running」プロパティをコンポーネントから発せられるシグナルに接続することで、たとえばユーザーがボタンを選択したときにアニメーションを再生することができます。詳細については、「コンポーネントをシグナルに接続する」を参照してください。

アニメーションをループで複数回実行するには、「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 は、指定された期間、何も起こらないステップとなります。

2つのアニメーションの間にポーズを指定するには：

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

パフォーマンスに関する考慮事項

UI では、滑らかさやダイナミックな遷移、視覚効果を効果的に活用することができます。ただし、サポートされている機能の中には、UI のパフォーマンスに影響を与える可能性があるため、使用には注意が必要です。

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

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

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

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

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