こんにちは。AdobeXDでマトモなプロトタイプを作らないことで定評のあるかもしれないモンブランです。

今回はツイッターに投稿した、自分をジャンプさせるアニメーションをどう作ったのかを書きたいと思います。

せっかくなので、最後に方に実際に使用したデータも置いておきました。気になる方は是非ダウンロードしてみてくださいねb

素材の準備

まずはキャラ素材を用意します。
今回はツイッターのアイコンに使っている素材をそのまま使ってみました。

これをそのままXDにコピペします。
そして、アートボードを調整。
※拡大縮小を不用意に行うと線幅が狂ってしまうので注意が必要です。

また動かしたい部分をXD上でグループ化しておきます。今回は頭と胴体と影、頭についてはメガネをグループ化しました。

それぞれの画面を用意する

次にアニメーションさせるためのアートボードを作成します。

アニメーションには5画面使っています。
※最初は停止している状態を作るための画面を含めると6画面です。

- 通常
- しゃがむ
- ジャンプ
- 着地
- 元に戻る途中

と言った感じでアートボードを作成し、それぞれのオブジェクトを移動させたり、回転させたり、パス自体を編集しています。

ここで注意しておきたいのは、配置しているオブジェクトのグループ名や名前はアートボード毎に変えたりしないこと（例えばAとBのアートボードで同じ胴体をbody1、body2のようにアートボード毎に変えるようなこと）
オブジェクトの名前がずれていると、アニメーションをせずディゾルブ（フェード）になってしまいます。

アニメーションを設定する

次にプロトタイプモードへ移動し、アートボードをつなげていきます。

アニメーションは開始と終了の変化の差分を追ってくれる｢自動アニメーション｣を使っています。

トリガーには｢時間｣を使っています。
通常のXDの使い方だと、タップやスクロールのアクションでアニメーションをすることが多いですが、時間を使うことでタップをせずに自動でアニメーションが動き、最初と最後をつなぐことでループ状態を作ることができるわけです。

微調整

ざっくりと動きが決まったら、最後にアニメーションの速度や細かい所を修正しました。

最初は直立不動直角バウンスジャンプをしていたのですが、ジャンプの頂点でメガネが上に浮くようにしたり、首と胴体の角度を調整して、反りながらジャンプをしてる感じにしたり、少しだけリアル感を出してみましたｂ

細かいところで言うとジャンプ中は空中でスピードが落ちるので「イーズイン」、落下時は徐々にスピードがあがるため「イーズアウト」をイージングに使用しています。

書き出し

書き出しはプレビューモード時の右上に表示される、録画ボタンで動画化しましたb

書き出し後の形式もmp4なので、すぐにツイッターにアップできました！

いやーなんだこれ！ツイッターにアップするための機能なのかな★（違う）

というわけでカクついてますが、できあがったのはこちら。

データは下記になりますので、ぜひぜひ参考にしてください〜！ｂ