このレッスンでは、スクロールするとコンテンツがフェードイン表示されるインタラクションのつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
フェードイン前後の見た目を作成
今回作成するのは、スクロールすると「Feature」のセクションがフェードイン表示されるアニメーションです。
まず、このシリーズ第2回で作成した「About」のセクションがビューポートの上に隠れているアートボード、すなわち「Feature」のセクションがビューポートに表示されているアートボードを複製します。この複製したアートボードが、フェードイン後の状態です。
複製元のアートボードを編集し、「Feature」セクションにある背景以外のオブジェクトの不透明度を0%にして非表示にします。同じ作業を、「About」のセクションがビューポートの下に隠れているアートボードでも行います。
フェードインアニメーションの設定
プロトタイプモードに移動します。
「About」セクションがビューポートに表示されているアートボードを選択します。そて、青い矢印を「Feature」セクションがビューポートに表示されているアートボードに接続します。
トリガーに「時間」、ディレイに「0秒」、アクションの種類に「自動アニメーション」を指定します。これで、「Feature」セクションがビューポートに表示された瞬間、自動的にアニメーションが開始されます。イージングに「イーズアウト」、デュレーションには「1秒」を指定します。
プレビューして動きを確認
「Feature」のセクションがビューポートの下に隠れているアートボードを選択した状態で、ワークスペース右上の「デスクトッププレビュー」ボタンをクリックし、プレビューウィンドウを開きます。すると、ドラッグ操作によりフェードインアニメーションが開始されることを確認できます。
同様の作業でタイムテーブルのセクションにもフェードインアニメーションを設定できます。