【 保存版!! 】Adobe XD 自動アニメーションの使い方まとめ★ vol.1

2018年10月のAdobe XDのアップデートで、
自動アニメーション】という機能が加わりました。

これがね、すごいんですよ!

 

新機能の中で一番好き♡

で、Adobe XDは【自動アニメーション】の他にも動きをつくるアクションが色々あるから、どんな動きがつくれるのかまとめてみた。

保存版やよ。

 

Adobe XD の基本はこちらで。

プロトタイプ設定のアクション一覧

↑↑プロトタイプ設定のアクション一覧
アクション全部で4つ。

・トランジション × 10個
・オーバーレイ × 1個
・自動アニメーション × 7個
・Speek Playback × 1個

 

 

とりあえず、はじめに「トランジション」と「オーバーレイ」から解説します。

トランジション :なし / ディゾルブ

トランジション:なし 0.8秒
ペチペチ切り替わるかんじ。

 

トランジション:ディゾルブ 0.8秒
だんだん消えていきながら次のコマにうつりますね。

 

 

トランジション :スライド

トランジション: 左にスライド 0.8秒

次のコマが左から現れてくるみたい
スライドショーみたいにね。

 

トランジション: 右にスライド 0.8秒

 

トランジション: 上にスライド 0.8秒

 

トランジション: 下にスライド 0.8秒

 

 

トランジション :プッシュ

トランジション: 左にプッシュ 0.8秒

次、プッシュです。
ほぉ、コマ間のラインがわからないですね!
良いね!アイデア次第で色々できそうな予感。

 

トランジション: 右にプッシュ 0.8秒

 

トランジション: 上にプッシュ 0.8秒

 

トランジション: 下にプッシュ 0.8秒

 

 

オーバーレイ

オーバーレイ: ディゾルブ 0.8秒

1コマ目のデザインが残ったまま、
その上に2コマ目が乗っかります。

 

便利やね〜。

はい次、本題の自動アニメーションいきます。

 

Ami