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

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

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

プロトタイプモードでアートボードを接続します。 

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

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

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

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

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

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