2020.06.12 /

XDでホバーアニメーションを作った話

XDの可能性すごい!!って話をしたくてブログ書きます。

前もXD取り入れてみた、みたいな内容で書いた気がするんですけど、その時より使える機能増えてて全然使えてなかった!もったいない!!!ってなったので、XD奥が深いです。

常日頃からワイヤーはXDで作成しているのですが、基本的にデザイナーさんへ提出する用でコーダーさんへのアニメーションの指示は別資料を使うことが多いです。

以前クラアントからデザイン支給の案件をやった際に、

アニメーションなどはXDで確認してください。

と言われたことがあり、半信半疑でプロトタイプで確認したところ、ホバーアニメーション、スクロールアニメーション、KVのスライドイメージなどなどをXDで全て展開していて、ここまでできるの!??と驚いたのですが、なかなか実際に作成する機会がありませんでした。

そんな時に自社サービスで展開予定のWordPressパッケージのWF作成を担当することになったので、この機会にマスターしてやるぞ!ということでいくつか試してみたものを共有します。

 

ボタンのホバーアクション

デザイン上でホバーイメージが作成してあることは多いのですが、どのようにアニメーションが変化するのか?という指示までXDでは作成できるので、細かいアニメーションを指示するにはもってこいですね!!

今回作成したのはホバーで左から右へ色が変化するアニメーションです。

ホバーアニメーションの作り方

①通常時のボタンの上にホバーした時に表示したいレイヤーを予め用意して左端に置いておきます。

②アニメーションに必要な要素をまとめて選択して、コンポーネントを設定する

③選択したコンポーネントは初期ステートとして登録されるので、「+」をクリックして、ホバーアニメーションを選択する。

④ホバーステートでホバー後の表示を登録する。

⑤アニメーションの秒数調整したい時はプロトタイプモードで調整する。

作業はこれだけです!

動きのあるホバーを設定する場合、①の事前にレイヤーを準備するのが重要です。

初期のステート(起点)→ホバーステート(終点)のイメージで作成します。

起点を円の中心に置いて、終点で円全体が黒くなるイメージ。

これを実際にプロトタイプモードでホバーしてみると、

こうなるわけです。

この原理がわかっていればいろんな動きも作れると思います。もう少し複雑な動きも試してみました。

 

 

 

言葉で説明しにくいアニメーションもXDでここまでできればわかりやすいですよね。

XDアニメーションはシリーズ化して試したものを共有していく予定です、、!