今回はXDでマウスホバー時orクリック時のアニメーションを実装する方法を紹介します。
WEBサイトやアプリではほぼ必ずと言っても良いほどマウスホバーやクリック時のアクション、アニメーションがあります。
XDのワイヤー作成段階で具体的なアニメーションを作っておけば開発が楽になるので覚えておきましょう。
ホバー時orクリック時のアニメーションを実装する方法
①ボタンのデザインが完成したら、そのデザインを「コンポーネントにする」を押します。
②右側のプロパティインスペクターのコンポーネント（マスター）の右にある「＋」ボタンを押して「ホバーステート」を選択してから、そのパーツを複製します。
③複製したボタンデザインを重ねてから影を消します。次に影が隠れる部分までズラして押せるボタンの完成です。
⑤右上のデスクトップレビューを押すと下記の様にアニメーションの実際の動きを確認出来ます。
プロトタイプモードにするとアニメーションの動きとアクショントリガーを選択できます。
下記の部分がアニメーションの動き方の設定です。ボタンの場合はトランジョンを選択すればふわっとした動きになり違和感がなくなります。
下記の項目がトリガーの選択です。
XDの場合はクリックとホバーを使い分けるほど複雑なものは作るべきでは無いので、ホバーのみで良いと思います。
以上が「XDでマウスホバー時orクリック時のアニメーションを実装する方法」でした。
