オーダーメイドのアコーディオンを開発

パーソナライズされたアコーディオンを作成するには、ドロップダウン要素とインタラクションを利用する必要があります。このチュートリアルでは、次の内容を取り上げます。

1. ドロップダウン要素を挿入する方法
2. ドロップダウンスイッチをカスタマイズする方法
3. アコーディオンのデザイン方法
4. オーダーメイドのアニメーションを制作する方法‍

ドロップダウン要素を追加する方法

の 落ちる 要素には、パーソナライズされたアコーディオンとしての使用を簡素化するデフォルトの組み込み関数が含まれています。 ドロップダウンリスト クリックすると非表示になり、ページの別の要素または部分をクリックすると非表示になります。 

ドロップダウン要素をウェブサイトに組み込むには、 パネルを追加 （あ） > 要素 > 高度な そしてドラッグして 落ちる 要素をキャンバス上に配置します。 

デフォルトのドロップダウンスタイルを変更する方法

ドロップダウンをカスタマイズしたアコーディオンに組み込むには、デフォルトのドロップダウン要素のスタイルを調整する必要があります。特に、ドロップダウンが親要素 (つまり、カスタム アコーディオンを含む要素) のスペース全体を占めるように幅を変更する必要があります。 

ボーナスヒント: 割り当てる クラス ドロップダウンに追加して（例：「アコーディオン項目」）、スタイル設定の再利用性を高めます。クラスを使用したスタイル設定についてさらに詳しく調べてください。

デフォルトのドロップダウン スタイルを調整するには: 

1. 親を選択 落ちる デザイナーキャンバス上の要素（この例では「アコーディオンアイテム」クラスを指定しました）
2. 訪問 スタイルパネル > サイズ
3. 特定 幅 として 100%

ドロップダウンスイッチをカスタマイズする方法

現時点では、 ドロップダウンスイッチ アコーディオンが閉じられたときに、ドロップダウンリスト内のコンテンツが非表示になるように、親要素（つまりコンテナ）を完全に埋めます。これを実現するには、ドロップダウンスイッチの 画面 そして 身長 プロパティ：

1. を選択 ドロップダウンスイッチ キャンバス上でクラスを割り当てます（例：「アコーディオントグル」）
2. 案内する スタイルパネル > レイアウト
3. セット 画面 に フレックスボックス 水平方向の完全なカバー
4. セット 整列 に 中心 アコーディオンの中央に縦書きテキストを配置する
5. 進む スタイルパネル > サイズ
6. 定義する 身長 値（例：80px）

アコーディオンのデザイン方法

この段階の後、サイトをテストしてアコーディオンを操作すると、アコーディオンが展開されても、その中のデフォルトのコンテンツが周囲のコンテンツと重なることがあります。これは、デフォルトの 位置 ドロップダウンリストのスタイルは 絶対これは、メニューやナビゲーション バーなどの従来のドロップダウンの使用では望ましい動作ですが、パーソナライズされたアコーディオンの場合は、アコーディオン内のコンテンツが拡大したときに近くのコンテンツが調整されるように (たとえば、下または上にシフトするように) デフォルトの配置を変更する必要があります。 

アコーディオンを革新するには: 

1. 親を選択 落ちる キャンバス上の要素（例：「アコーディオン項目」） 
2. を選択 "歯車”アイコンを公開 ドロップダウン設定 「見せる" に隣接 ナビゲーション
3. 選択してください リストボックス アートボード上のオプション
4. 案内する デザインパネル > アライメント
5. 調整する アライメント に 修理済み
6. アートボード上の祖先ドロップダウン要素（例：「アコーディオン項目」）を選択します。
7. へ移動 デザインパネル > 寸法
8. セット マスク に 隠された アコーディオン領域を超えるコンテンツをマスクする

パーソナライズされたアニメーションをデザインする手順

次に、次の手順に従って、カスタム アコーディオンの開閉を処理する独自のアニメーションを作成します。 

1. 最初の行動を確立する
2. アコーディオンの拡張をアニメーション化する
3. アコーディオンの閉じ方をアニメーション化する

最初の行動を確立する

アコーディオンの 2 つの初期アクション (つまり、ページが読み込まれる前に要素に適用されるスタイル) を作成して開始します。

まず、ドロップダウンの初期アクションを開始します。 

1. 選択してください 落ちる アートボード上の要素（例：「アコーディオンアイテム」）
2. 案内する インタラクティブパネル > 要素トリガー 「プラス” シンボルをクリックして新しい要素トリガーを作成します
3. 選ぶ ドロップダウンを展開
4. タップ アクションを選択 下 メニューの表示
5. 選ぶ アニメーションを起動する 下 パーソナライズされたアニメーション
6. 「プラス” 記号が隣り合って スケジュールされたアニメーション
7. カスタムアニメーションに名前を割り当てます（例：「アコーディオンが展開」）
8. 「プラス”記号の横に 活動 アニメーションにアクションを組み込む
9. 選ぶ マグニチュード 下 様々な
10. 「初期状態として設定」のチェックボックスをオンにします。 タイミング
11. 入力します 身長 値（例：80px） マグニチュード あなたの身長に合わせて 落ちるスイッチ （例：「アコーディオンスイッチ」）前の手順で
12. タップ 保存

次に、スイッチ アイコンの初期アクションを開始します。 

1. 選ぶ シンボル ドロップダウン要素内
2. に向かう デザインパネル アイコンクラスにラベルを付けます（例：「アコーディオンアイコン」）—これでアニメーションはアイコンのすべてのインスタンスに影響を与えることができます
3. 先祖を選択してください 落ちる アートボード上の要素（例：「アコーディオンアイテム」）
4. 展開する インタラクティブパネル 
5. 選択してください ドロップダウンを展開 前のステップで作成したインタラクション
6. 「装備” シンボルは、以前に作成したカスタマイズされたタイミングアニメーションの隣にあります（例: “アコーディオンが展開する” インタラクション）
7. 選択してください アイコン （例：「アコーディオンアイコン」）
8. 「プラス”記号の横に 活動 アイコンの初期アクションを設定する 
9. 選ぶ 回転 下 アルター 
10. 「初期状態として設定」のチェックボックスをオンにします。 タイミング 
11. に行く 回転 ダイヤルして Z軸 に 0度
12. タップ 保存

アコーディオンの拡張をアニメーション化する

次に、アコーディオンをクリックしたときに同時に発生するアコーディオンを展開するためのアクションを設定します。「アコーディオン項目」のサイズは、その中のコンテンツのサイズに合わせて調整され、「アコーディオンアイコン」は 180 度回転します。 

「アコーディオン項目」のサイズを変更し、アコーディオンを開いたときに「アコーディオンアイコン」を回転させるには: 

1. 祖先を選ぶ 落ちる アートボード上の要素（例：「アコーディオンアイテム」）
2. ロックを解除 インタラクティブパネル 
3. を選択 ドロップダウンを展開 先ほど定式化した相互作用
4. 「装備” シンボルは、前の手順で作成したカスタマイズされたタイミングアニメーションの横にあります (例: “アコーディオンが開く” アニメーション) 
5. 「プラス” 記号の横 行動 アニメーションに約束を挿入する
6. 選ぶ サイズ 内で その他
7. 下の「初期状態として設定」のチェックを外します タイミング
8. 案内する サイズ 「自動車" のために 身長 — これはアコーディオンの高さと内部のコンテンツに対応します 
9. 選ぶ アイコン （例：「アコーディオンアイコン」）
10. 「プラス「アコーディオン項目」の隣にある「」記号 サイズ そのタイムスタンプに別のタスクを追加するように設定したアクション。これにより、両方のタスクが同時に実行されることが保証されます。
11. 選ぶ 回転 下に 変身  
12. に行く 回転 調整して Z軸 に 180度 — これにより、アコーディオンが開いたときにアイコンが上を向くように回転します
13. タップ 保存

注記： 各アクションのイーズメント (つまり、アニメーション遷移の加速と減速) を変更するオプションがあります。補間、イーズメント、スムージングに関する詳細情報を取得します。

アコーディオンを閉じるアニメーション

次に、アコーディオンを閉じるためのインタラクションを設定します。このインタラクションには、アコーディオン項目が 2 回目に押されたとき、または訪問者がアコーディオン項目の外側をクリックしたときに発生するアクションが含まれます。アコーディオン項目は元のサイズに戻り、アイコンは 0 度に回転します。 

アコーディオンを閉じるアニメーションを作成するには:

1. 親を選ぶ 落ちる キャンバス上の要素（例：「アコーディオン項目」）
2. 明らかにする インタラクションパネル 
3. 選択する ドロップダウンが開きます 前のステップで設計したインタラクション 
4. タップ アクションを選択 下に メニューを閉じる 
5. 選択する アニメーションを開始
6. 「プラス” シンボルをタイムドアニメーションの隣に配置して、カスタマイズされたアニメーションを作成します
7. カスタムアニメーションに名前を割り当てます（例：「アコーディオンが閉じる」）
8. 「プラス” 記号を使用してアニメーションに約束を挿入します
9. 選ぶ サイズ 下に その他
10. 入力してください 身長 割り当てた高さと一致する値（例：80px） 落ちる 前のステップで初期状態の要素
11. を選択 アイコン キャンバスまたはナビゲータ（例：「アコーディオンアイコン」）
12. 「プラス「アコーディオン項目」の隣にある「」記号 サイズ そのタイムスタンプに別のタスクを追加するアクションを作成します。これにより、両方のタスクが同時に実行されるようになります。
13. 選ぶ 回転 下に 変身 
14. に行く 回転 調整して Z軸 に 0度 — これにより、アイコンが最初の位置に戻り、アコーディオンが閉じたときに下向きになります。
15. タップ 保存

これで、インタラクションを使用したユニークなアコーディオンの作成が完了しました。