左右設限滑塊頁眉菜單欄
發(fā)布時間:2022-03-15 10:21 [ 我要自學網原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 1221

1.1頁面布局

1.1.1頁面設定

新建一個頁面,命名為【左右設限滑塊頁眉菜單欄】。

在【左右設限滑塊頁眉菜單欄】內新建命名為【【左右設限滑塊頁眉菜單欄】的動態(tài)面板,動態(tài)面板的【State1】更改為【全部】,在【全部】內新建一個命名為【右浮圖標】的【組合文件】和一個命名為【切換菜單】的【動態(tài)面板】,【切換菜單】內的【State1】更改【文本】。

1.1.1.1【右浮圖標】

從元件庫內分別拉入兩個【矩形】元件分別做圖標的圖標背景1和圖標背景2。

圖標背景1的【填充】色為#ffffff,透明度為30%,圖標背景2的【填充】色為#ffffff,透明度為90%,切圖標背景2的X大于圖標背景2X的8px,然后將圖標嵌入圖標背景1和圖標背景2兩者形成的半透明上下左右居中區(qū)域。

 

1.1.1.2【切換菜單】

從元件庫內分別拉入14個【文本標簽】元件依次在切換菜單規(guī)定的區(qū)域范圍內排序成行,并依次將內容更改為1至14的數字。

【文本標簽】的【填充】色皆為透明,字體顏色#666666。

1.2動態(tài)交互

1.2.1效果設計

1.2.1.1圖標交互樣式設置

選中【圖標】,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的另一種狀態(tài)的【圖片】導入。

1.2.1.2文本標簽的交互樣式設置

選中表現1至14個數字的【文本標簽】元件,進行【交互樣式設置】,將鼠標懸停、鼠標按下、選中的交互樣式的【字體顏色】進行設置。

1.2.2交互流程

1.2.2.1實現左右設限滑塊頁眉菜單欄的動態(tài)交互

選中【左右設限滑塊頁眉菜單欄】動態(tài)面板內的【全部】,在【屬性】中設定【向左拖動結束時】和【向右拖動結束時】的用例,配置相關的動作。

步驟一:設置【向左拖動結束時】用例的配置動作

在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選【切換菜單】動態(tài)面板,設置【移動】為【經過】狀態(tài),x=-150,y=y,【動畫】為【緩進緩出】,時間t=2000毫秒,【界限】中添加【左側】邊界,且大于等于-338。

步驟二:設置【向右拖動結束時】用例的配置動作

在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選【切換菜單】動態(tài)面板,設置【移動】為【經過】狀態(tài),x=-200,y=y,【動畫】為【緩進緩出】,時間t=2000毫秒,【界限】中添加【左側】邊界,且小于等于0。

1.3預覽效果

Axure8.0視頻教程
我要自學網商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。
V
特惠充值
聯系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網頁設計 會計課程 興趣成長 AIGC