スクリーンにスタートアニメーションを追加

アニメーションの使用

このトピックでは、スタートアニメーションを使用したスクリーンをデザインします。以下の画像は FindFlix サンプルからのスクリーンのスタートアニメーションを示します。アプリケーションメニューのワークスペースタブからアクセスできます。

以下の要素を含むスクリーンを用意してください。

グループの透明度を最大値に設定する必要がありますが、グループを画像で表示するために、この設定を変更しました。ヘッダーは、この手順では必要ありません。最初に表示されるようスクリーンを設定すると、Indigo Studio は作成したデザインをスタートアニメーションの開始ポイントとして使用します。

以下は主な手順です。

下側のバーをダブルクリックすると、タイムライン パネルが展開します。

タイムライン パネルが表示されます。
「オープニングアニメーションを追加」リンクをクリックします。

デザインしたスクリーンは最初のアニメーションセグメントで表示されます。その後に新しいアニメーションセグメントが追加されます。各アニメーションセグメントは「ステップ」として機能します。

アニメーションセグメントは、同じ要素に進行性の変化を追加する際に便利です。たとえば、フェードインの結果を持つ要素を 1 つのセグメントに追加し、次のセグメントに移動します。最初のスクリーンデザインを変更するには、タイムラインで最初のアニメーションセグメントをクリックして選択します。その後に変更を追加するため、新しいセグメントを選択したまま変更を追加します。

グループの透明度値を変更します。

グループのエディターで、スライダーを左に移動し、値を 0 に設定します。

「不透明度の設定」インタラクションが タイムライン のアニメーションセグメントに追加されます。
グループを移動します。

グループをドラッグし、コンテナーの上に移動します。グループの移動インタラクションがタイムラインに表示されます。
インタラクションにアニメーションを追加します。

クリックして Shift キーを押すと、2 つのインタラクションを選択します。矢印が表示された後にドラッグを開始します。この矢印で項目のサイズを変更し期間を調節できます。

パネルの項目の上にホバーすると、開始、中止、および期間情報が表示されます。

デザイナーの上にある「スクリーンの実行」ボタンをクリックします。

プレビューを実行し、アニメーションを確認できます。