XDの可能性すごい！！って話をしたくてブログ書きます。
前もXD取り入れてみた、みたいな内容で書いた気がするんですけど、その時より使える機能増えてて全然使えてなかった！もったいない！！！ってなったので、XD奥が深いです。
常日頃からワイヤーはXDで作成しているのですが、基本的にデザイナーさんへ提出する用でコーダーさんへのアニメーションの指示は別資料を使うことが多いです。
以前クラアントからデザイン支給の案件をやった際に、
アニメーションなどはXDで確認してください。
と言われたことがあり、半信半疑でプロトタイプで確認したところ、ホバーアニメーション、スクロールアニメーション、KVのスライドイメージなどなどをXDで全て展開していて、ここまでできるの！？？と驚いたのですが、なかなか実際に作成する機会がありませんでした。
そんな時に自社サービスで展開予定のWordPressパッケージのWF作成を担当することになったので、この機会にマスターしてやるぞ！ということでいくつか試してみたものを共有します。
ボタンのホバーアクション
デザイン上でホバーイメージが作成してあることは多いのですが、どのようにアニメーションが変化するのか？という指示までXDでは作成できるので、細かいアニメーションを指示するにはもってこいですね！！
今回作成したのはホバーで左から右へ色が変化するアニメーションです。
ホバーアニメーションの作り方
①通常時のボタンの上にホバーした時に表示したいレイヤーを予め用意して左端に置いておきます。
②アニメーションに必要な要素をまとめて選択して、コンポーネントを設定する
③選択したコンポーネントは初期ステートとして登録されるので、「＋」をクリックして、ホバーアニメーションを選択する。
④ホバーステートでホバー後の表示を登録する。
⑤アニメーションの秒数調整したい時はプロトタイプモードで調整する。
作業はこれだけです！
動きのあるホバーを設定する場合、①の事前にレイヤーを準備するのが重要です。
初期のステート（起点）→ホバーステート（終点）のイメージで作成します。
起点を円の中心に置いて、終点で円全体が黒くなるイメージ。
これを実際にプロトタイプモードでホバーしてみると、
こうなるわけです。
この原理がわかっていればいろんな動きも作れると思います。もう少し複雑な動きも試してみました。
言葉で説明しにくいアニメーションもXDでここまでできればわかりやすいですよね。
XDアニメーションはシリーズ化して試したものを共有していく予定です、、！
