Adobeのプロトタイピングツール「Adobe XD」。2018年10月のアップデートにて、自動アニメーションという機能が実装された。
ざっくり書くと、変化前と変化後、2つのアートボードを線でつないで、待機時間、変化にかかる時間、どんな演出で切り替わるかを指定すると、アートボード間のアニメーションを簡単に作ってくれる機能だ。
実装から数ヶ月間、なかなか腰をすえてこの機能を試すことが出来なかったけど、ようやく試す時間を作ることが出来た。結果、いろいろわかってきたので、自分用に特徴をまとめてみようと思う。
いいところ
- 「アニメーション前」と「アニメーション後」の最低2つのアートボードをつなぎ合わせるだけで、お手軽にアニメーションを生成出来る。とにかくお手軽なのが良い！
- アニメーション起動のトリガーは、タップ（クリック）も時間経過のどちらも可能
触ってみて、ここは大変だった
ディレイ時間と継続時間の設定を、複数のアートボード一括で出来ない。結果として、アニメーションに使用するアートボードの数が増えるほど、全体のトランジション設定の変更は困難になる。
※つまり、複数のパーツを「アートボードごとに1つ1つ動かす」たぐいのアニメーションには、手間的に向いていない。
アニメーションを作る前にココは押さえておくべきだな、と感じた箇所
- あらかじめ絵コンテを書いて、それぞれのパーツをどう動かすかのイメージをアタマの中に作っておこう
- 絵コンテに基づき、アニメーションさせるパーツを準備しておこう
- それぞれのパーツに「レイヤー名」を指定しておこう（変化前と変化後のアートボードでレイヤー名が同一でないと、自動アニメーションは機能しない）
まだ出来ないこと（2019/04/18現在）
- パーツごとに異なるトランジションを指定することは出来ない
- 今のところ、マウスオーバーをアニメーションのトリガーにすることは出来ない
- 文字色のアニメーション変化には対応していない
