時間トリガーを使用して時限式トランジションを定義する方法を説明します。

時間トリガーを使用すると、時間のディレイと持続時間に基づいて、アートボード間のトランジションを作成できます。 

時間トリガーをアクションと組み合わせて使用すると、ループアニメーションや進行状況バーなどの様々な効果を作成できます。以下に、自動アニメーションでループ効果を作成するために 使用される時間トリガーの例を示します。

時限式トランジションを使用したアニメーション番号カウンター
時限式トランジションを使用したアニメーション番号カウンター

単純な時限式トランジションを作成するには、次の手順を実行します。

  1. プロトタイプモードで、移動元のアートボードのタイトルをクリックし、それを移動先のアートボードにワイヤーで接続します。

  2. コネクタをクリックして、プロパティインスペクターインタラクションパネルを表示し、次のオプションを設定します。

    • トリガー:時間」を選択します。「時間」オプションが表示されていない場合は、手順 1 でアートボード全体とそのタイトルを選択していない可能性があります。
    • ディレイ:トランジションを開始するまでの遅延時間を入力します。設定できる範囲は、0.2〜5 秒です。
    • アクション:「トランジション」を選択します。また時間トリガーを自動アニメーションオーバーレイ 、そして音声再生など、他のアクションと組み合わせて様々な効果を作成することもできます。ループアニメーション効果の作成方法については、を参照してください。
    • 移動先 :手順 1 で接続した移動先のアートボードが表示されます。必要に応じて変更できます。
    • イージング :移動元のアートボードに適用するイージング効果を選択します。
    • 持続時間:イージング効果の持続時間を入力して、イージング効果が持続する時間の長さを指定します。設定できる範囲は、0.2〜5 秒です。

    XD がアートボードの属性を保存し、それ以降作成する画面のデフォルトとして提供します。

  3. 時限式トランジションをプレビューするには、 を選択します。

例とサンプルファイル

数値カウンターアニメーションは、面白く目立つ方法で数値を表示するために使用されます。ここでは、時限式トランジションを使用して、ランニングスコアボードを作成する方法を説明します。

1. プロトタイプモードでアートボードのタイトルを選択し、以下のオプションを設定します。

  • トリガー:時間」を選択します。
  • ディレイ :時間遅延を 0 秒と入力します。
  • アクション:「自動アニメーション」を選択します。
  • イージング:「イーズインアウト」を選択します。
  • 期間 :持続時間を 4 秒と入力します。

2. をクリックして、アニメーション化された数値カウンターをプレビューします。

サンプルファイルをダウンロードし、このビデオをご覧になって試してみてください。

視聴時間:2 分 47 秒


時限式トランジションを使用して、アプリケーションのオンボーディング体験を作成しましょう。このビデオをご覧になり、この無償 UI キットを使用してオンボーディングワークフローを作成してください。

視聴時間:5 分 2 秒

アプリケーションのオンボーディング体験

また、XD サポートコミュニティで、サンプルやチュートリアルをチェックすることもできます。

ヒントとコツ

時間トランジションと自動アニメーションオーバーレイを組み合わせて、インタラクティブ効果を作成することができます。詳しくは、以下のビデオをご覧ください。

視聴時間:8 分 33 秒


本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー