自動アニメーションを使用してマイクロインタラクションを作成する方法について説明します。
自動アニメーションを使用すると、没入型のトランジションを作成して、複数のアートボードにわたるコンテンツの動きを視覚化できます。
ドラッグ & タイムトリガーを組み合わせると、YouTube スワイプやドラッグなどの幅広い効果を作成して、プロトタイプのストーリーをより的確に伝えることができます。
アニメーションプロトタイプを作成するには、次の手順を実行します。
始める前に、以下の簡単なルールを確認して、アニメーション中にオブジェクトが処理される方法を把握します。
プロトタイプモードでアートボードを接続します。
コネクタをクリックして、プロパティインスペクターに表示されたインタラクションパネルで、次のオプションを設定します。
A. トリガーの種類を選択します。 B. アクションを選択して、自動アニメーションを実行します。 C. 移動先のアートボードを選択します。 D. イージング効果を選択します。
サポートされているブラウザーで 
を選択してアニメーションをプレビューします。
XD は、自動アニメーションアートボードのプレビュー時に、スクロールをサポートしません。
自動アニメーションの基礎を学習したい場合は、この UI キットを使用してください。これには基本的なインタラクション、UI 要素、ドラッグの例が用意されています。
このようなサンプルファイルをさらに使用して、自動アニメーションをテストすることもできます。
タイムラインとキーフレームの煩わしさなしに YouTube で見るようなスワイプ効果を実現できます。
アートボードを接続し、プロトタイプのプロパティインスペクターで以下のオプションを選択します。
サンプルファイルをダウンロードして実際に試すか、このビデオで詳細をご覧ください。
視聴時間：1 分
ここでは、アニメーションモバイルメニューを簡単に作成する方法を説明します。
デザインに高度なアニメーションを追加する場合は、このビデオで、After-Effects の操作方法をご覧ください。
Adobe XD から After Effects への書き出し（視聴時間：1 分）
XD の自動アニメーションについて詳しくは、以下のビデオをご覧ください。
視聴時間：6 分
