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

最終更新日 : 2022年2月17日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例とサンプルファイル

オートアニメートの詳細について学習したいですか？基本的なインタラクション、UI要素、ドラッグの例、その他多数の機能が含まれるこのUIキットで開始してください。

このようなサンプルファイルをさらに使用して、自動アニメーションをテストすることもできます。

タイムラインとキーフレームの煩わしさなしに YouTube で見るようなスワイプ効果を実現できます。

アートボードを接続し、プロトタイプのプロパティインスペクターで以下のオプションを選択します。

トリガー：ドラッグを選択します。
アクション：「自動アニメーション」を選択します。
移動先：アニメーションを移動する先のアートボードを選択します。
イージング：イージング効果の作成オプションを選択します。例えば、アニメーションをプロトタイプからイーズイン/アウトする場合は、「イーズイン/アウト」を選択します。