AdobeXDの自動アニメーション機能を初心者なりに触ってみた

Adobeのプロトタイピングツール「Adobe XD」。2018年10月のアップデートにて、自動アニメーションという機能が実装された。

ざっくり書くと、変化前と変化後、2つのアートボードを線でつないで、待機時間、変化にかかる時間、どんな演出で切り替わるかを指定すると、アートボード間のアニメーションを簡単に作ってくれる機能だ。

実装から数ヶ月間、なかなか腰をすえてこの機能を試すことが出来なかったけど、ようやく試す時間を作ることが出来た。結果、いろいろわかってきたので、自分用に特徴をまとめてみようと思う。

いいところ

• 「アニメーション前」と「アニメーション後」の最低2つのアートボードをつなぎ合わせるだけで、お手軽にアニメーションを生成出来る。とにかくお手軽なのが良い！
• アニメーション起動のトリガーは、タップ（クリック）も時間経過のどちらも可能

触ってみて、ここは大変だった

ディレイ時間と継続時間の設定を、複数のアートボード一括で出来ない。結果として、アニメーションに使用するアートボードの数が増えるほど、全体のトランジション設定の変更は困難になる。
※つまり、複数のパーツを「アートボードごとに1つ1つ動かす」たぐいのアニメーションには、手間的に向いていない。

アニメーションを作る前にココは押さえておくべきだな、と感じた箇所

1. あらかじめ絵コンテを書いて、それぞれのパーツをどう動かすかのイメージをアタマの中に作っておこう
2. 絵コンテに基づき、アニメーションさせるパーツを準備しておこう
3. それぞれのパーツに「レイヤー名」を指定しておこう（変化前と変化後のアートボードでレイヤー名が同一でないと、自動アニメーションは機能しない）

まだ出来ないこと（2019/04/18現在）

• パーツごとに異なるトランジションを指定することは出来ない
• 今のところ、マウスオーバーをアニメーションのトリガーにすることは出来ない
• 文字色のアニメーション変化には対応していない