このレッスンでは、ページを読み込んだ際に表示されるイントロアニメーションのつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
アニメーション各段階の見た目を作成
新規アートボードを作成し、それをコピーして2枚目を作成します。2枚目のアートボードには、アセットパネルからロゴをドラッグして中央に配置し、アートボードと同じ大きさの黒い長方形を作成してアートボードの下に配置します。
2枚目のアートボードをコピーして3枚目を作成します。ロゴを削除し、2枚目のアートボードの黒い長方形をコピーしてアートボード全体が隠れるように貼り付けます。
予め用意されているマスターデザインのアートボードをコピーして、4枚目のアートボードを作成します。アートボード上部に配置されている「参加する」ボタンと「ページトップ」ボタンの不透明度を0%にして非表示にします。
これでイントロアニメーション開始から終了までの各段階ができました。
自動的にアニメーションが開始されるインタラクションを設定
プロトタイプモードに移動して、1枚目のアートボードから4枚目のアートボードまで自動的にアニメーションされるように設定します。
まず、1枚目のアートボードを選択して、表示される青い矢印を2枚目のアートボードに接続します。トリガーに「時間」、ディレイに「1秒」を指定すると、1枚目のアートボードが表示された1秒後に、自動的にインタラクションが開始されます。アクションの種類に「トランジション」、アニメーションに「ディゾルブ」、イージングに「イーズアウト」、デュレーションには「0.6秒」を指定します。
次に、2枚目のアートボードを選択し、青い矢印を3枚目のアートボードに接続します。1枚目のアートボードと同様に、トリガーに「時間」、ディレイに「1秒」を指定します。アクションの種類に「トランジション」、アニメーションに「上にスライド」、イージングに「イーズアウト」、デュレーションに「0.8秒」を指定します。
最後に、3枚目のアートボードを選択し、青い矢印を4枚目のアートボードに接続します。トリガーに「時間」、ディレイには「0秒」を指定します。アクションの種類に「自動アニメーション」、イージングに「イーズアウト」、デュレーションに「0.8秒」を指定します。
プレビューして動きを確認
1枚目のアートボードを選択した状態で、ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、1枚目のアートボードから4枚目のアートボードまで、自動的にアニメーション付きで遷移することを確認できます。