開發定製手風琴

製作個人化手風琴涉及利用下拉元素和互動。本教程將涵蓋：

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. 將「設定為初始狀態」標記為 chekbox 定時
11. 進入一個 高度 值（例如，80px）下 規模 與給定的高度一致 落下轉變 （例如，前方步驟中的「手風琴開關」）
12. 輕敲 節省

接下來，啟動開關圖示的初始操作： 

1. 選擇 象徵 在下拉元素內
2. 前往 設計面板 並標記您的圖標類（例如，“手風琴圖標”） - 現在您的動畫可以影響圖標的所有實例
3. 選擇你的祖先 落下 畫板上的元素（例如“手風琴項目”）
4. 展開 互動面板 
5. 選擇 下拉式選單展開 您在前面的步驟中精心設計的交互
6. 點選“齒輪” 符號與您先前製作的自訂定時動畫相鄰（例如，「手風琴展開」互動）
7. 選擇 圖示 （例如，「手風琴圖示」）
8. 點選“加” 符號旁邊 活動 設定圖示的初始操作 
9. 選擇 旋轉 在下面 改變 
10. 將「設定為初始狀態」標記為 chekbox 定時 
11. 前往 旋轉 並撥打 z軸 到 0度
12. 輕敲 節省

製作手風琴展開動畫

接下來，設定當點擊手風琴時同時展開手風琴的操作 - “手風琴項目”大小將調整為其中的內容大小，並且“手風琴圖標”將旋轉 180 度。 

要更改“手風琴項目”的大小並在手風琴打開時旋轉“手風琴圖標”： 

1. 選擇祖先 落下 畫板上的元素（例如“手風琴項目”）
2. 解鎖 互動面板 
3. 選擇 下拉式選單展開 您之前製定的互動
4. 點選“齒輪” 符號與您在前面的步驟中製作的自訂定時動畫相鄰（例如，“手風琴打開”動畫） 
5. 點選“加” 符號旁邊 行動 在您的動畫中插入承諾
6. 選擇 尺寸 之內 各種各樣的
7. 取消選擇下面的「設定為初始狀態」chekbox 定時
8. 導航 尺寸 並輸入“汽車」對於 高度 — 這對應於手風琴與其內容物的高度 
9. 選擇 圖示 （例如，「手風琴圖示」）
10. 點選“加” 符號與“手風琴項目”相鄰 尺寸 您剛剛建立的在該時間戳附加另一個任務的操作 - 這保證了這兩個任務同時動畫
11. 選擇 旋轉 下面 轉換  
12. 前往 旋轉 並調整 z軸 到 180度 — 這會旋轉圖標，使其在手風琴打開時向上指向
13. 輕敲 節省

筆記： 您可以選擇修改每個動作的緩動（即動畫過渡的加速和減速）。取得有關插值、緩和和平滑的更多資訊。

製作手風琴關閉動畫

接下來，您將為手風琴式結束建立互動。此互動將包含當第二次按下手風琴項目或訪客在手風琴項目外部單擊時發生的任務 - 手風琴項目將恢復到其初始大小，並且圖標將旋轉回 0 度。 

要設定手風琴關閉的動畫：

1. 選擇父級 落下 畫布上的元素（例如“手風琴項目”）
2. 揭示 互動面板 
3. 選擇 下拉式選單打開 您在前面的步驟中設計的交互 
4. 輕敲 選擇一個操作 下面 選單關閉 
5. 選擇 開始動畫
6. 點選“加” 符號與定時動畫相鄰，用於製作自訂動畫
7. 為您的自訂動畫指定一個名稱（例如“手風琴關閉”）
8. 點選“加” 符號在動畫中插入承諾
9. 選擇 尺寸 下面 各種各樣的
10. 輸入一個 高度 與您指派給您的高度一致的值（例如，80px） 落下 元素在前面步驟中的初始狀態
11. 選擇 圖示 在畫布上或導航器中（例如，“手風琴圖標”）
12. 點選“加” 符號與“手風琴項目”相鄰 尺寸 您剛剛設計的在該時間戳記添加另一個任務的操作 - 這確保這兩個任務同時動畫
13. 選擇 旋轉 下面 轉換 
14. 前往 旋轉 並調整 z軸 到 0度 — 這會將圖示旋轉回其初始位置，以便當手風琴關閉時圖示向下指向
15. 輕敲 節省

這就是您使用互動成功創建獨特手風琴的結論！