このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると不透明度が変わるボタンのプロトタイプをデザインする手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
ボタンコンポーネントの作成とホバーステートの追加
予め、長方形ツールで作成した背景と、その上にテキストを載せたボタンが用意されています。まず、これをコンポーネントに変換します。右クリックで表示されるコンテキストメニューから「コンポーネントにする」を選択すると、ボタン周囲の枠線が青から黄緑色に変わります。これで、ボタンがコンポーネントに変換されました。
次に、ステート機能を使って、ホバーステートを追加します。ステート機能とは、ひとつのコンポーネントに対して、複数の状態を持たせることができる機能です。
プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックすると、「新規ステート」「ホバーステート」というメニューが表示されます。ここでは「ホバーステート」を選びます。
続けて、ホバーステートの見た目を編集します。この操作は、ホバーステートが選択されている状態で行います。ボタンをダブルクリックして背景を選択したら、不透明度を80%に変更します。ここで、初期設定のステートとホバーステートを順に切り替えると、不透明度の変化を確認できます。
ホバーステートのインタラクションの確認
インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。
ホバーステートを追加すると、自動的にホバーのインタラクションが追加されます。そのため、特に追加の設定をしなくても、マウスオーバーでボタンの見た目が変化します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンの上にマウスカーソルを移動して、不透明度が変わることを確認しましょう。
このように、ホバーステートを追加するだけで、簡単にマウスオーバーで不透明度が変わるボタンを作成できます。
アニメーションの調整
プロトタイプモードでは、プロパティインスペクターでアニメーションを調整することができます。「イージング」を「イーズアウト」から「バウンス」に変更し、「デュレーション」を「0.3秒」から「0.6秒」に変えると、2回フェードする動きになります。