自動アニメーションとは - Adobe XDのチュートリアル

このレッスンでは 自動アニメーションについて 説明します。 教材として エクササイズファイルのフォルダーにある 10 フォルダーの中の 10_05.xd を使います。 自動アニメーションを使用することで より動きのあるプロトタイプを 作成することができます。 まずは自動アニメーションの 基本を確認しましょう。 レイヤーパネルを表示して 現在用意してある この before というアートボードの中の アイコンを確認すると、 それぞれ iconA・B・C・D というレイヤー名が表示されています。 この before のアートボードを 複製したいので、 アートボード名をクリックして Mac の command D、 Windows の方は Ctrl D を押します。 複製したアートボードの名前を after と変えておきましょう。 まず一番上にある iconA について 自動アニメーションを設定していきます。 after の中にある 一番上のアイコンも 複製ですので、 iconA という before と 同じ名前になっています。 after の方の iconA を このように右の方に移動してみましょう。 モードをプロトタイプモードに 切り替えます。 今回はアートボードをクリックしたら 画像アニメーションが起こる というふうにしたいので before のアートボードを 選択し、 アートボード自体の右に 接続ハンドルが表示されますので、 この接続ハンドルをドラッグして、 after のアートボードの上で離します。 「トリガー」 何をきっかけにアニメーションが起こるかは 「タップ」にしておきます。 クリックしたらアニメーションが 発生します。 「アクション」の中の 「種類」を 「自動アニメーション」に切り替えます。 移動先はアートボード名の after が表示されていて、 「イージング」「デュレーション」は このままにしておきます。 「デュレーション」というのは アニメーションを何秒かけて行うか、 持続時間を表します。 今回の場合、0.3 秒かけて アニメーションするという意味になります。 では before のアートボードを 選択している状態で 右上の「デスクトッププレビュー」を クリックします。 アートボード上、どこでもクリック できるようになっていますので、…