モーフィンアニメーションというのはご存知でしょうか?四角から丸へと、丸から三角形に形を自然を変えるアニメーションのことです。これがAdobe XDでも簡単に実装することができます。今回は作ったデータも最後に配布します。先ず、例としてホバーステートを使って再現してみます。
このアニメーションは単純にホバーステートで四角の角を限界まで丸めただけです。
今回はこのようなAppleの製品を参考にした簡単なイラストが次々に変わっていくアニメーションを作っていきます。
作り方
名前を同じにする(重要!)
初めにお見せしたアニメーションは角を丸くしただけなので、要素の名前は同じですよね。Illustratorなどで作成したベクターファイルも変形させることが可能です。レイヤー上で各要素の名前を同じにしてください。自動アニメーションでは名前が少しでも違うと上手く機能しません。
SNSのアイコンに同じ名前をつけて自動アニメーションでモーフィンアニメーションを再現しました。形の変化がかなり変ですが、このようなことがXDでは可能です。アニメーションがおかしいのはアンカーポイントが次のアンカーポイントに移動するので、複雑な形からの動きを自然にするには少し根気がいります。
今回作っていくアニメーションは基本的に長方形を使っているので自然に形を変えることが可能です。では作っていきましょう。
形とアニメーションの工程を考える
先ずはアニメーションで変化する形を考えていきます。そしてどの要素が次の要素に変化していくのか考える必要があります。紙に描いて考えるのもいい手だと思います。
時計から始まり、時計に戻ってくるアニメーションを作っていきます。
時計
先程の図面にあったように時計から作っていき。各ステートを追加していきます。
時計はシンプルに長方形を組み合わせて角を丸くします。
コンポーネント化
全ての要素を選択してコンポーネント化(Command + K)します。
スマートフォン
ステートの追加
ステートを追加してスマートフォンと名前をつけます。コンポーネントの欄に+があるのでそこから「新規ステート」を選択すれば追加できます。ここからスマートフォンのステートと時計のステートを交互に編集していくので、選択しているステートに注意しながら編集してください。
コピーアンドペースト、変化する要素を消す
もし初めに図形を予め作っていた方は、コピーしてコンポーネント内に貼り付けます。そして、時計の文字盤(スクリーン)がスマートフォンの縁になるので、その要素だけ消します。
名前を変更
時計のステートとスマートフォンのステートを行き来し要素の名前を同じにします。時計のスクリーンの名前は「長方形2」なので、スマートフォンの縁の長方形も同じ名前にします。
スマートフォン上の線は長方形で作る
スマートフォンの次はノートパソコンになります。線から長方形には変形しないので、長方形を先のように細くします。
時計のステートで線を隠す
線もコピーアンドペーストして時計のステートに貼り付けます。そして、スクリーンの端に隠れるように配置します。この際、貼り付けた線の名前の確認を忘れないようにしてください。おそらく違う名前になっているので変更してください。
アニメーションの確認
編集中はアニメーションの確認を細かくしていきましょう。簡単にアニメーションが上手く行っているか確認する方法は、アートボードを2枚用意し各ステートをそれぞれに配置します。あとは自動アニメーションで確認します。
線の色はアニメーションがわかりやすいように分けています。
ノートパソコンとデスクトップパソコン
他の要素も先程と同じ様に、ステートを追加、配置、名前の変更していけば完了です。コピーアンドペーストした際に前のステートの要素が残っていると思います。その要素の名前を確認して、貼り付けた要素に同じ名前をつけます。そして参考にした前のステートの要素を消すだけです。今回のようなシンプルな形のアニメーションは意外に簡単にできます。
全てのステートが揃ったらアニメーションを確認してましょう。
動きを加えたり、修正しよう!
このままだと少しアニメーションが寂しいので動きを加えます。そして初めからある線のアニメーションがノートパソコンに移行する際にあまりに不自然なので修正します。
隠れる(隠れていく)要素の位置を変える
今回のアニメーションのメインに動くのはスクリーン画面ですよね、その周りの要素がずっと動かないでその位置に留まっているので、変えてあげます。これによって動きに工夫を加えられます。
例えば時計からスマートフォンへのアニメーションの動きを変えてみます。
線をもう一つ加えてみた
もう一つの線を加えてスクリーン下に隠しました。これで少しは自然な動きになったと思います。
プロトタイプで実際に使ってみる
簡単なプロトタイプを作ってみました。ドラッグアクションを使ったプロトタイプです。一番上に透明の長方形を配置してドラッグアクションを起こしています。
どうでしたでしょうか?Adobe XDを使えば簡単にモーフィンアニメーションが数分で出来上がります。
今回作ったデータのダウンロード先はこちらになります。
他にもAdobe XDのチュートリアルをたくさんご紹介しているので御覧ください。
ではまた!