このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレゼン資料の枠組を作成し、様々なアニメーションを加えていく方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
アニメーション開始前後の状態を作成
「自動アニメーション」は、遷移前と遷移後のアートボードを用意すると、その間の状態を補完するアニメーションを自動的に作成してくれる機能です。
今回は棒グラフが伸びるアニメーションを作成します。まず、棒グラフのスライドを複製して並べます。左側のアートボードの棒グラフのバーの高さをすべて 1px に縮めます。これが遷移前の状態です。次に、右側の遷移後の棒グラフの高さを、必要に合わせて調整します。
自動アニメーションを設定する
プロトタイプモードに切り替えて、2つのアートボードを青い矢印でつなぎ、インタラクションを作成します。アクションの種類に「自動アニメーション」を指定すると、自動アニメーションの機能が利用できます。ここでは、イージングを「イーズイン/アウト」、デュレーションを「1秒」に設定します。
再生すると、棒グラフが伸びるアニメーションを確認できます。
自動アニメーションの注意点
「自動アニメーション」は、遷移前と遷移後のアートボードの同じ名前のオブジェクトの差分を補間する機能です。同じオブジェクトが両方のアートボードに存在していたとしても、名前が異なる場合はアニメーションの対象になりません。
自動アニメーションを使用する際は、レイヤーパネルを使って、2 つのアートボードで、対応するオブジェクトの名前や階層構造が同じになっているかどうかを確認しましょう。
試しに片方のアートボードだけ名前を変えてみると、名前を変えたオブジェクトはアニメーションされないことを確認できます。