プロトタイプモードで、移動元のアートボードのタイトルをクリックし、それを移動先のアートボードにワイヤーで接続します。
時間トリガーを使用してタイマートランジションを定義する方法を説明します。
時間トリガーを使用すると、時間のディレイと持続時間に基づいて、アートボード間のトランジションを作成できます。
時間トリガーをアクションと組み合わせて使用すると、ループアニメーションや進行状況バーなどの様々な効果を作成できます。以下に、自動アニメーションでループ効果を作成するために 使用される時間トリガーの例を示します。
単純なタイマートランジションを作成するには、次の手順を実行します。
プロトタイプモードで、移動元のアートボードのタイトルをクリックし、それを移動先のアートボードにワイヤーで接続します。
コネクタをクリックして、プロパティインスペクターにインタラクションパネルを表示し、次のオプションを設定します。
XD がアートボードの属性を保存し、それ以降作成する画面のデフォルトとして提供します。
タイマートランジションをプレビューするには、 を選択します。
数値カウンターアニメーションは、面白く目立つ方法で数値を表示するために使用されます。ここでは、タイマートランジションを使用して、ランニングスコアボードを作成する方法を説明します。
1. プロトタイプモードでアートボードのタイトルを選択し、以下のオプションを設定します。
2. をクリックして、アニメーション化された数値カウンターをプレビューします。
サンプルファイルをダウンロードし、このビデオをご覧になって試してみてください。
視聴時間:2 分 47 秒
タイマートランジションを使用して、アプリケーションのオンボーディング体験を作成しましょう。このビデオをご覧になり、この無償 UI キットを使用してオンボーディングワークフローを作成してください。
視聴時間:5 分 2 秒
また、XD サポートコミュニティで、サンプルやチュートリアルをチェックすることもできます。
時間トランジションと自動アニメーションやオーバーレイを組み合わせて、インタラクティブ効果を作成することができます。詳しくは、以下のビデオをご覧ください。
視聴時間:8 分 33 秒
アカウントにログイン