Illustratorで作ったイラストをAdobe XDに簡単に移せることは知っていますか?やり方はとても簡単で、IllustratorでコピーしてXDでペーストするだけです。
今回はそんなイラストをふわふわ浮かせるアニメーションを自動アニメーションを使って作って行きたいと思います。
完成したファイルはこの様になります。
Adobe XDを使えばこんなアニメーションを数分もあれば作ることができます。ではご説明します。
やり方
まずはイラストをIllustratorで作成
Adobe XDでもベクターを使ったイラストを可能作成ですが、僕はIllustratorのほうが得意なのでいつもこちらで作成しています。
今回はIsometricなメールのイラストをちゃちゃっと作成してみました。
下に影を忘れないようにしましょう。浮いた感じが増します。影の形は丸などにして、そこまでこだわることはないと思います。
Isometricアートの作り方はこちらで紹介しています。よかったらどうぞ。
ファイルをコピーアンドペースト
初めに話したように、IllustratorでコピーしてXDでペーストするだけでXDに元のベクターファイルのまま移すことが可能です。
レイヤー名やレイヤーの位置を確認(重要!)
自動アニメーションで重要なのが、レイヤー名とレイヤーの位置です。これが他のアートボードや別のステートで違ってくるとアニメーションがうまくいきません。
例えばレイヤー名が「楕円形4」と付いていて別のステート同じ円が「楕円形5」という名前に変わっていたら、アニメーションは起きません。
レイヤーの位置が上に行ったり下に行ったりして、変わってしまっているとアニメーションがチカチカしたりして見た目もよくありません。
なので自動アニメーションに使うイラストや図形のレイヤー名とレイヤーの位置はきちんと整頓しておきましょう。
もし編集中にレイヤー名や位置を変えたりしたら、他のアートボードやステートのレイヤー名や位置も同じようにしましょう。
アートボードを複製 / コンポーネント化でステートを追加
ここは2つのやり方があります。今回は簡単に出来るアートボードの複製でやっていきます。イラストが上下に浮くアニメーションなのでステートを追加してやるほどでもないと思います。念の為2つの方法を説明していきます。
アートボードを複製
アートボード名を選択してCommand/Ctrl + ドラッグで複製できます。
ステートを追加する方法でやる方は、
1つ目のアートボードを初期ステート、2つ目のアートボードを追加したステートと考えてください。
2つ目(複製した)アートボードを編集
イラストを上にずらす
複製したアートボードのイラストの位置を少し上にずらします。そして、下の影は変えずにそのままの位置にしましょう。
影を小さくする
影を小さくすれば浮いたようなアニメーションに見えます。
ステートのやり方で作っている方は、追加したステートのイラストの位置を同じ様にずらせばいいです。
プロトタイプでアートボードをつなげる
先ずステートを追加して作成した方は、アートボードを複製して2つ目のアートボードのイラストのステートを追加ステートにしてください。このアニメーションは2つのアートボードが必要になります。
アートボードを選択して、各アートボードをつなげる(時間)
ここで注意なのが、イラストから青い線を繋げないでアートボードから2つ目のアートボードに繋げます。
なぜかと言うと「時間」というトリガーを使えないからです。
あとは各アートボードを繋げてください。
設定は
時間 0秒
自動アニメーション
イーズイン/イーズアウト
1秒 (お好きな速さで)
これで完成です。プレビューで確認してみてください。簡単にできたと思います。
永久にループしたアニメーションになります。ボタンを配置すれば他のアートボードに移動も可能です。ぜひ試してみてください。
後はも少し調整して最終的にはこの様になりました。
ホバーでふわっとさせたい方は、今回の例で言うとモダル全体をコンポーネント化してホバーステートを追加して、ホバーステートのイラストを上に浮かせればいいのかなと思います。
他にもAdobe XDのチュートリアルをご紹介しているのでよかったらチェックしていってください。
ではまた!