このレッスンでは、クリック操作で3枚の商品画像がループするカルーセルのつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
商品画像を並べてコンポーネントを作成
まず3枚の画像を複製して、元画像の横に並べてから、6枚全部をグループ化します。あとから分かりやすいように、左から3番目の画像のレイヤー名に「1」を指定します。これが最初にカルーセル中央に表示される画像になります。あとは右へ順に「2」から「4」、右端に戻って「5」と「6」を指定します。
次に、グレーの長方形を画像の背面に置いて、6枚の画像と同じ幅に揃えます。画像と背景の長方形をアートボードに配置したら、その上にボタンも配置します。
ボタン、画像グループ、背景をすべて選択した状態でプロパティーインスペクタのコンポーネントの横のプラスマークをクリックしてコンポーネントに変換します。これでカルーセルのコンポーネントの初期状態ができました。
ステートを使って別の製品が選択された状態を作成
作成したコンポーネントにステートを追加します。新規ステートを作成し、名前を「1」とします。再び新規ステートを作成し、名前を「2」とします。そして左端の画像を右端に移動してから、グループの左端を背景の左端に合わせます。同様の作業を「6」のステートができるまで繰り返します。これで画像の位置が順にひとつずつずれた6つのステートが揃います。
ボタンクリックで画像がスライドするアニメーションを作成
デザインモードからプロトタイプモードに移動して、ボタンをクリックすると画像が横にスライドするインタラクションを設定します。
「1」のステートを表示して、右側のボタンを選択し、水色のプラスマークをクリックしてインタラクションを追加します。インタラクションのトリガーは「タップ」、種類は「自動アニメーション」にし、移動先に「2」のステートを指定します。左側のボタンにも同じインタラクションを追加します。移動先に「6」のステートを指定する点だけが異なります。
続けて、「2」のステートにも同様にインタラクションを設定します。右側のボタンの移動先には「3」のステート、左側のボタンの移動先には「1」のステートを設定します。
同様にして、「6」のステートまで、すべてのステートのボタンにインタラクションを設定します。
反対の端に移動する画像を消す
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開くと、設定したインタラクションを確認できます。すると、端の画像が反対の端に移動するのが見えてしまうことがわかります。そこで、これが見えなくなるように修正します。
「1」のステートに切り替えて、両端の画像を選択して不透明度を0%にします。これで、左右どちらのボタンをクリックしても横切る画像が見えなくなります。「6」までの全てのステートで、同様に両端の画像を透明にします。これで、画像がループするカルーセルは完成です。