完成アニメーションイメージ

画像の上に、横からロゴがスライドしてきて、バウンドする動きをするアニメーションを作ります。

完成イメージはこちらです。

実際に作ってみましょう！

XDのデータはこれだけです。

まず、左上の編集モードをデザインにます。

そして、動く前と後のイメージをXDのアートボードで作成します。

最初はロゴがない状態なので、アートボード１では、ロゴをアートボード外に出しています。

次に、プロトタイプに切り換えて、二つのアートボードを選択した後に、クリックし、アートボード同士をつなぎます。

右側のパネルではアニメーション設定ができます。

今回は、

トリガー　→　タップ

アクション　→　自動アニメーション

イージング　→　バウンス

デュレーション　→　１秒

にしてみました。

プロトタイプのまま、右上の▶（再生ボタン）を押します。

今回はトリガー（アニメーションが始まるきっかけ）がタップになっているので、サムネイルの上でクリックしてみると、アニメーションが始まります。

このようにアニメーションの最初と最後の動きのイメージを用意するだけで、中間の動きはXD側で補完して、簡単にアニメーションが作れます。

まとめ

今回は本当に簡単なアニメーションの作成でしたが、これを活用すると、フェードインやスライドショーなどの実際の動きを盛り込んだ、Webサイトイメージを作ることができます。

Webデザインだけでなく、XDでプレゼン用のスライドにも活用できますので是非お試しください。