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

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

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

こんなふうに3つのアートボードを準備しておき、適切な設定をほどこすと・・・
アートボード間の動きを自動補完して、こんなアニメーションが簡単に作れる!

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

いいところ

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

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

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

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

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

まだ出来ないこと(2019/04/18現在)

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