Webサイトでも使われるマウスオーバーした際の基本的なCSSアニメーション再現が出来たらなと思い作ってみました。作り方は今までのチュートリアルをご覧いただけたら簡単に再現することが出来ます。最後にデータのダウンロードリンクも置いていきますので、参考にしてください。
基本的なホバーアクションのやり方
ホバーで色が薄くなるボタンを作るとします。ボタンの色をホバー時に薄くしたいのでそれを頭に入れながら作っていきます。
まずはボタンを作ります。そのあとホバー時に変化を加えたい要素の全体を選択しコンポーネント化します。右タブにあるコンポーネントの＋をクリックするか、ショートカットキーを使えば出来ます。
Command / Ctrl + K コンポーネント化
そしてもう一度＋をクリックすると、新規ステートかホバーステートを選択できます。ホバーステートを選択します。
あとはボタンの不透明度を下げれば完成です。色を薄くしても同じようになります。簡単ですね！プレビューで確認して見てください。その際にステートを初期ステートに戻してください。そのままだと何も起きませんので。アニメーションを変えたい場合は、プロトタイプで色々いじってみてください。
６つのホバーアクション
よくWebサイトで見る基本的なアニメーションになります。シンプルなので簡単に説明していきますね！一番下にデータのダウンロードリンクもありますので、それを見ながら参考にしてください。
薄くなるボタン
１つ目は先程の１分で作ったボタンです。ホバーステートで不透明度を変えています。
色が反転
ホバーステートで文字色とボタンを枠線だけにしました。これのアニメーションに少し手こずらされました。色のトランジションがあまりうまくキレイに行かなかったので、妥協した結果です。プロトタイプで自動アニメーションかトランジションの設定を変えるとうまく行ったりします。
ボタンらしいボタン
ホバーさせるとボタンを押したように凹むアニメーションです。これは初期ステートとホバーステートのボタンの背後に少し暗い長方形を配置しています。そして初期ステートのボタンを少し上にすらすように配置するだけで出来ます。
浮いて影が出てくるボタン
これも少し悩みましたが、先程と同じように背後に影になるボタンと同じサイズの長方形を配置します。そしてホバーステートでボタンを少し上にずらします。ここで背後の長方形のオブジェクトのぼかしを使用します。オブジェクトのぼかしは背景のぼかしの横の矢印をクリックすると出てきます。ぼかしを加えた背後の長方形長方形の不透明度を初期ステートは０％、ホバーステートでは１００％にしています。
テキスト色の変化
これはリンクなどによく使われるので便利そうですね。ホバーステートで色を変えるだけです。
アンダーライン
これはマスキングを使用してます。初期ステートで長方形を短くして、ホバーステートで長くすればよいかと思ったのですが見た目が汚かったのでやめました。マスキングのやり方がわからない方はこちらを御覧ください。Gifで解説しているのでわかりやすいかと思います。マスキングのサイズを変えるだけで出来ます。
以上です！使えそうなものがあったでしょうか？
こちらからデータをダウンロードして参考にしてください。
他にも自動アニメーションやホバーアクションを使ったチュートリアルをご紹介しているのでチェックしていってください。
ではまた！
