マニュアル キャンセル

プロトタイプのアニメーション化

自動アニメーションを使用してマイクロインタラクションを作成する方法について説明します。

自動アニメーションを使用すると、没入型のトランジションを作成して、複数のアートボードにわたるコンテンツの動きを視覚化できます。

ドラッグ & タイムトリガーを組み合わせると、YouTube スワイプやドラッグなどの幅広い効果を作成して、プロトタイプのストーリーをより的確に伝えることができます。

Web サイトでのリップルインタラクション
Web サイトでのリップル効果

タッチ対応デバイスでのスワイプ&ドラッグ効果
タッチ対応デバイスでのスワイプ&ドラッグ効果

アニメーションプロトタイプを作成するには、次の手順を実行します。

  1. 始める前に、以下の簡単なルールを確認して、アニメーション中にオブジェクトが処理される方法を把握します。

    • 移動先のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードインします。
    • 移動元のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードアウトします。
    • オブジェクトのレイヤー名とグループの両方が一致している場合、属性がアニメーション化されます。サポートされているプロパティとトランジションの完全なリストについては、XD アートボードトランジションでの自動アニメーションのサポート対象および対象外のプロパティを参照してください。
    • 水平または垂直のスクロール効果をプロトタイプ化する場合は、スクロールグループを使用します。
  2. プロトタイプモードでアートボードを接続します。 

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

    • トリガー:アニメーションを起動するオプションを選択します。例えば、カードのタッピング操作をシミュレートするには、「タップ」を選択します。
    • アクション:「自動アニメーション」を選択します。例えば「Tap」という 1 つのトリガーに、2 つのアクションを割り当てることができます。これには、プロパティインスペクターの最初の「アクション」の「+」ボタンを「トランジション」、「自動アニメーション」、「オーバーレイ」、「スクロール先」、「ひとつ前のアートボード」のいずれかに設定し、2 番目の「アクション」の「+」ボタンを「オーディオ再生」や「音声再生」などのトランジションでないアクションに設定します。最初のアクションにオーディオ再生または音声再生を選択すると、2 番目のアクションを追加できなくなることに注意してください。
    • 移動先:アニメーションを移動する先のアートボードを選択します。
    • イージング:イージング効果をシミュレートするためのオプションを選択します。例えば、アニメーションをプロトタイプからイーズアウトする場合は、「イーズアウト」を選択します。
    自動アニメーションワークフロー
    自動アニメーションワークフロー

    A. トリガーの種類を選択します。 B. アクションを選択して、自動アニメーションを実行します。 C. 移動先のアートボードを選択します。 D. イージング効果を選択します。 

  4. オブジェクトのインタラクションをさらに定義するには、既にインタラクションが定義されているオブジェクトを選択し、アートボードの「+」ボタンをクリックします。プロパティインスペクターで「+」をクリックすることもできます。

    トリガーのうち、タップ、ドラッグ、ホバー時間は 1 回しか適用できず、音声キー/ゲームパッドは何度でも適用できることに注意してください。

  5. サポートされているブラウザー を選択してアニメーションをプレビューします。

    XD は、自動アニメーションアートボードのプレビュー時に、スクロールをサポートしません。

例とサンプルファイル

詳細情報

XD の自動アニメーションについて詳しくは、以下のビデオをご覧ください。
視聴時間:6 分

ヘルプをすばやく簡単に入手

新規ユーザーの場合