1.1頁面布局
1.1.1頁面設(shè)定
新建一個(gè)頁面，命名為【左右設(shè)限滑塊頁眉菜單欄】。
在【左右設(shè)限滑塊頁眉菜單欄】?jī)?nèi)新建命名為【【左右設(shè)限滑塊頁眉菜單欄】的動(dòng)態(tài)面板，動(dòng)態(tài)面板的【State1】更改為【全部】，在【全部】?jī)?nèi)新建一個(gè)命名為【右浮圖標(biāo)】的【組合文件】和一個(gè)命名為【切換菜單】的【動(dòng)態(tài)面板】，【切換菜單】?jī)?nèi)的【State1】更改【文本】。
1.1.1.1【右浮圖標(biāo)】
從元件庫內(nèi)分別拉入兩個(gè)【矩形】元件分別做圖標(biāo)的圖標(biāo)背景1和圖標(biāo)背景2。
圖標(biāo)背景1的【填充】色為#ffffff，透明度為30%，圖標(biāo)背景2的【填充】色為#ffffff，透明度為90%，切圖標(biāo)背景2的X大于圖標(biāo)背景2X的8px，然后將圖標(biāo)嵌入圖標(biāo)背景1和圖標(biāo)背景2兩者形成的半透明上下左右居中區(qū)域。
1.1.1.2【切換菜單】
從元件庫內(nèi)分別拉入14個(gè)【文本標(biāo)簽】元件依次在切換菜單規(guī)定的區(qū)域范圍內(nèi)排序成行，并依次將內(nèi)容更改為1至14的數(shù)字。
【文本標(biāo)簽】的【填充】色皆為透明，字體顏色#666666。
1.2動(dòng)態(tài)交互
1.2.1效果設(shè)計(jì)
1.2.1.1圖標(biāo)交互樣式設(shè)置
選中【圖標(biāo)】，進(jìn)行【交互樣式設(shè)置】，將鼠標(biāo)懸停、鼠標(biāo)按下、選中的交互樣式的另一種狀態(tài)的【圖片】導(dǎo)入。
1.2.1.2文本標(biāo)簽的交互樣式設(shè)置
選中表現(xiàn)1至14個(gè)數(shù)字的【文本標(biāo)簽】元件，進(jìn)行【交互樣式設(shè)置】，將鼠標(biāo)懸停、鼠標(biāo)按下、選中的交互樣式的【字體顏色】進(jìn)行設(shè)置。
1.2.2.1實(shí)現(xiàn)左右設(shè)限滑塊頁眉菜單欄的動(dòng)態(tài)交互
選中【左右設(shè)限滑塊頁眉菜單欄】動(dòng)態(tài)面板內(nèi)的【全部】，在【屬性】中設(shè)定【向左拖動(dòng)結(jié)束時(shí)】和【向右拖動(dòng)結(jié)束時(shí)】的用例，配置相關(guān)的動(dòng)作。
步驟一：設(shè)置【向左拖動(dòng)結(jié)束時(shí)】用例的配置動(dòng)作
在case1【組織動(dòng)作】中添加【移動(dòng)】動(dòng)作，在【配置動(dòng)作】?jī)?nèi)勾選【切換菜單】動(dòng)態(tài)面板，設(shè)置【移動(dòng)】為【經(jīng)過】狀態(tài)，x=-150，y=y，【動(dòng)畫】為【緩進(jìn)緩出】，時(shí)間t=2000毫秒，【界限】中添加【左側(cè)】邊界，且大于等于-338。
步驟二：設(shè)置【向右拖動(dòng)結(jié)束時(shí)】用例的配置動(dòng)作
在case1【組織動(dòng)作】中添加【移動(dòng)】動(dòng)作，在【配置動(dòng)作】?jī)?nèi)勾選【切換菜單】動(dòng)態(tài)面板，設(shè)置【移動(dòng)】為【經(jīng)過】狀態(tài)，x=-200，y=y，【動(dòng)畫】為【緩進(jìn)緩出】，時(shí)間t=2000毫秒，【界限】中添加【左側(cè)】邊界，且小于等于0。
1.3預(yù)覽效果
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。