このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレゼン資料の枠組を作成し、様々なアニメーションを加えていく方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
強調したいテキストにラインを引く
今回は、長いテキストの中の重要な箇所を強調するため、テキストの一部に線を引くアニメーションを作成します。まず、テキストだけのスライドを複製して、横に並べます。
長方形ツールを使って、左側のアートボードに、強調したいテキストを隠すように長方形を作成します。長方形の色を目立つ色に変更し、テキストのレイヤーの下に移動します。これで、長方形の上にテキストが表示された状態になります。
次に、作成した長方形をコピーして、右側のスライドの同じ位置に貼り付けます。この長方形もテキストのレイヤーの下に移動します。
左側のスライドに戻り、長方形の長さを 1px、不透明度を 0% に変更します。これはアニメーション開始時の状態です。
自動アニメーションを設定する
プロトタイプモードに切り替えて、左のアートボードから右のアートボードに矢印をつなげて、インタラクションを作成します。アクションの種類を「自動アニメーション」、イージングを「イーズイン/アウト」、デュレーションを「1秒」に設定します。
プレビューすると、タップでテキストの下に線が引かれることを確認できます。
自動的にアニメーションを開始する
タップ操作ではなく、スライドが表示されたら、自動的に線が引かれるようにしたい場合は、トリガーに「時間」を指定します。その際、「ディレイ」には、スライドが表示されてからアニメーションが発動するまでの時間を設定します。今回は 2 秒とします。
プレビューすると、画面をタップしなくても 2 秒後に線が引かれます。「ディレイ」を 0 秒にすると、遷移後すぐにアニメーションが開始されます。
マスクを使ったアニメーション
次はスライドタイトルが徐々に表示されるアニメーションを作成します。先ほどと同様に、テキストだけのスライドを複製して横に並べます。
左側のスライドのタイトルを覆うように長方形を配置します。そして、タイトルテキストと長方形を同時に選択した状態て右クリックし、「シェイプでマスク」を選択します。これでマスクグループが作成されます。
右側のアートボードのタイトルをを削除し、作成したマスクグループを貼り付けます。
左側のアートボードに戻り、マスクグループをダブルクリックして編集します。長方形の右辺をドラッグして、文字が見えなくなるまで小さくします。
プロトタイプモードに切り替えて、アートボードをつなげ、自動アニメーションを設定します。再生すると、タイトルテキストが徐々に出現するアニメーションが再生されます。