プロトタイプモードで、移動元のアートボードのタイトルをクリックし、それを移動先のアートボードにワイヤーで接続します。
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
時間トリガーを使用してタイマートランジションを定義する方法を説明します。
時間トリガーを使用すると、時間のディレイと持続時間に基づいて、アートボード間のトランジションを作成できます。
時間トリガーをアクションと組み合わせて使用すると、ループアニメーションや進行状況バーなどの様々な効果を作成できます。以下に、自動アニメーションでループ効果を作成するために 使用される時間トリガーの例を示します。
単純なタイマートランジションを作成するには、次の手順を実行します。
-
-
コネクタをクリックして、プロパティインスペクターにインタラクションパネルを表示し、次のオプションを設定します。
- トリガー:「時間」を選択します。「時間」オプションが表示されていない場合は、手順 1 でアートボード全体とそのタイトルを選択していない可能性があります。
- ディレイ:トランジションを開始するまでの遅延時間を入力します。設定できる範囲は、0.2〜5 秒です。
- アクション:「トランジション」を選択します。また時間トリガーを自動アニメーション 、オーバーレイ 、そして音声再生など、他のアクションと組み合わせて様々な効果を作成することもできます。ループアニメーション効果の作成方法については、例を参照してください。
- 移動先 :手順 1 で接続した移動先のアートボードが表示されます。必要に応じて変更できます。
- イージング :移動元のアートボードに適用するイージング効果を選択します。
- デュレーション:イージング効果の持続時間を入力して、イージング効果が持続する時間の長さを指定します。設定できる範囲は、0.2〜5 秒です。
XD がアートボードの属性を保存し、それ以降作成する画面のデフォルトとして提供します。
-
タイマートランジションをプレビューするには、 を選択します。
例とサンプルファイル
数値カウンターアニメーションを使用すると、面白く目立つ方法で数値を表示できます。ここでは、タイマートランジションを使用して、ランニングスコアボードを作成する方法を説明します。
1. プロトタイプモードでアートボードのタイトルを選択し、以下のオプションを設定します。
- トリガー:「時間」を選択します。
- ディレイ :時間遅延を 0 秒と入力します。
- アクション:「自動アニメーション」を選択します。
- イージング:「イーズインアウト」を選択します。
- デュレーション :持続時間を 4 秒に設定します。
2.
をクリックして、アニメーション化された数値カウンターをプレビューします。サンプルファイルをダウンロードし、このビデオをご覧になって試してみてください。
視聴時間:2 分 47 秒
タイマートランジションを使用して、アプリケーションのオンボーディング体験を作成しましょう。このビデオをご覧になり、この無償 UI キットを使用してオンボーディングワークフローを作成してください。
視聴時間:5 分 2 秒
また、XD サポートコミュニティで、サンプルやチュートリアルをチェックすることもできます。
ヒントとテクニック
時間トランジションと自動アニメーションやオーバーレイを組み合わせて、インタラクティブ効果を作成することができます。詳しくは、以下のビデオをご覧ください。
視聴時間:8 分 33 秒
関連リソース
アドビへのお問い合わせ
ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。