アニメーション セグメントの追加

アニメーションの使用

プレビュー

1 つのトランジションで同じ UI 要素の同じプロパティをアニメーション化する場合、アニメーション セグメントが便利です。たとえば、長方形の色を複数回変更、長方形を移動して戻る場合などに使用できます。このトピックでは、「ステップ」または「セグメント」で実行するアニメーションを持つスクリーンをデザインし、アニメーションで要素の色を 2 回変更します。

以下の画像は、アニメーションの開始、中間、終了のスクリーンを示します。この手順の例は Rove サンプルの Launch スクリーンに基づきます。このサンプルは、アプリケーション メニューのワークスペースタブからアクセスできます。

概要

以下は主な手順です。

  1. アニメーションをトリガーするインタラクションを追加
  2. アニメーション セグメントを追加
  3. 新しいアニメーション セグメントを追加
  4. スクリーンプレビュー を実行

詳細手順

(a-1) 1.アニメーションをトリガーするインタラクションを追加

  1. 新しいスクリーンで長方形を追加します。背景色を 4BACC6 に設定し、境界線の色を D7EDF2 に設定し、境界線の太さを 5 に設定します。

    例のキャンバス色は 383838 です。

  2. 新しいステートへのタップ/クリック インタラクションを長方形に追加します。

    このトピックは、新しいステートにアニメーション セグメントを追加する方法を紹介します。新しいインタラクションを追加するには、インタラクションの追加を参照してください。

  3. 背景色およびアウトライン色を変更します。

    プロパティ パネル で、このプロパティの別の色を選択します。このトピックで使用される色は E2E2E2 です。

    デザイナーの下部にある タイムライン にアクションを追加します。

  4. 変更の期間を長く設定します。

    タイムライン で「背景の設定」および「境界線カラーの設定」項目を CTRL/CMD を押して選択し、右側をドラッグすると、期間を長く設定します。

(a-2) 2.アニメーション セグメントを追加

  1. タイムライン パネルの最後にある + アイコンをクリックし、アニメーション セグメントを作成します。

  2. 「アニメーション セグメントの追加」オプションを選択します。

    Indigo Studio は新しいアニメーション セグメントをタイムラインに追加します。

(a-3) 3.新しいアニメーション セグメントを追加

手順 2 を繰り返し、新しいアニメーション セグメントを追加します。長方形の背景色を 4BACC6 に設定し、境界線色を D7EDF2 に設定します。

タイムラインで + アイコンをクリックし、アニメーションの終了にその他のスクリーンへのナビゲーションを追加します。このステート終了のインタラクションは、追加するインタラクションのように、その他のスクリーンに移動、URL を開く、またはスクリーンを新しいステートに変更することができます。開くアニメーションまたは終了アニメーションを表示し、新しいステートまたはスクリーンに移動する場合に便利です。

(a-4) 4.スクリーン プレビュー を実行

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

スクリーン プレビューを実行します。長方形をクリックしてインタラクションをトリガーします。長方形の色が 2 回変化します。

関連トピック

  • [インタラクションの追加] topic-1
  • [スクリーンに開始アニメーションを追加] topic-2
  • [インタラクションにアニメーションを追加] topic-3
  • [スクリーンインタラクションとステートについて] topic-4