このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
ボタンコンポーネントの作成とステートの追加
シェイプツールで作成した2種類のハートと、パーティクルのオブジェクトが用意されています。これらをすべて選択してから、コンテキストメニューを開いて「コンポーネントにする」を選択します。これで選択した要素がコンポーネント化されます。
続けて、コンポーネントに新しいステートを追加します。プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックして「新規ステート」をクリックすると新しいステートを追加できます。追加したステートには「Particle」と名前をつけます。
Particleステートに、タップされた状態の見た目を指定します。Particleステートが選択された状態で、コンポーネントをダブルクリック等で編集モードにします。大きなハートの色をピンクに変更し、小さなハートは大きさと位置を大きなハートに揃えて色をピンクにします。最後に、パーティクルをハートの外側に広げて位置を調整したら、円と線のサイズを適宜変更します。これがタップ後のいいねボタンの見た目になります。
ステートにインタラクションを設定
インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。
初期設定のステートが選択された状態であることを確認したら、いいねボタンを選択し、右に表示される青い矢印をクリックします。これでインタラクションが追加されます。
追加したインタラクションの属性を設定します。プロパティインスペクターを使い、トリガーは「タップ」、アクションの種類は「自動アニメーション」、移動先は「Particle」を選択します。さらに、イージングは「スナップ」に、デュレーションは「0.8秒」に設定します。
続いてParticleのステートを選択し、同様の手順でインタラクションを追加します。トリガーは「タップ」、アクションの種類は「トランジション」、移動先は「初期設定のステート」を選択します。アニメーションは「なし」にします。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンをクリックするとボタンの形状が変わることを確認しましょう。
アニメーションの調整
タップ後は、パークティクルが徐々に消えるように変更します。デザインモードに移動し、Particleステートを選択します。パーティクルのアピアランスを0に変更します。
再度プレビューウィンドウで確認すると、パーティクルが徐々に消えていくアニメーションに変わったことを確認できます。