1.1頁面布局
1.1.1頁面設(shè)定
新建一個頁面，命名為【界面右側(cè)懸浮可伸縮動態(tài)按鈕】，在這個頁面下面新建一個叫做【界面1】的子頁面，再在【界面1】下面新建兩個2子頁面，分別命名為【界面1-1】和【界面1-2】。
1.1.1.1【界面右側(cè)懸浮可伸縮動態(tài)按鈕】
在頁面內(nèi)新建一個【動態(tài)面板】。
【動態(tài)面板】的【State1】內(nèi)分別從左側(cè)元件庫內(nèi)拉入兩個【矩形】做一級背景（大小尺寸為1704*940）和二級背景（大小尺寸為1704*821，上下邊框?yàn)閷?shí)體線框，較粗樣式，顏色為#06C1FA）。
并從左側(cè)元件庫內(nèi)拉入一個內(nèi)聯(lián)框架，將其嵌入到二級背景之內(nèi)，隱藏其邊框，框架滾動條設(shè)為從不顯示，大小尺寸為1704*815，不覆蓋二級背景的樣式，且內(nèi)聯(lián)框架目標(biāo)頁面為【界面1】。
1.1.1.2【界面1】
頁面內(nèi)從左側(cè)元件庫拉入一個【矩形】元件，作為背景，大小尺寸為1643*760，邊框?yàn)閷?shí)體線，色值為#f2f2f2。
從左側(cè)元件庫拉入一個【內(nèi)聯(lián)框架】元件，將其嵌入到背景之內(nèi)，隱藏其邊框，框架滾動條設(shè)為從不顯示，大小尺寸為1639*754，不覆蓋背景的樣式，且內(nèi)聯(lián)框架目標(biāo)頁面為【界面1-1】。
新建兩個【動態(tài)面板】，分別命名為【界面1-1】和【界面1-2】，在兩個動態(tài)面板內(nèi)分別新建兩個相同命名的文件組合，然后分別從左側(cè)元件庫內(nèi)拉入一個【矩形】做背景，一個【文件標(biāo)簽】，一個【橢圓形】，以及在【橢圓形】內(nèi)嵌入圖標(biāo)，設(shè)定成按鈕的樣式。
1.1.1.3【界面1-1】&【界面1-2】
從左側(cè)元件庫拉入一個【一級標(biāo)題】元件，內(nèi)容改為界面1-1，
從左側(cè)元件庫拉入一個【一級標(biāo)題】元件，內(nèi)容改為界面1-2，
1.2動態(tài)交互
1.2.1效果設(shè)計
1.2.1.1實(shí)現(xiàn)右側(cè)懸浮按鈕的懸停、按下、選中的動態(tài)效果
選中【背景】，進(jìn)行其【交互樣式設(shè)置】，將鼠標(biāo)懸停交互樣式填充顏色設(shè)置為#ff0000、透明度為80%，鼠標(biāo)按下交互樣式填充顏色設(shè)置為#ff0000、線段顏色為#ff9900、選中交互樣式填充顏色設(shè)置為#ff0000、線段顏色為#ff9900。
1.2.1.2實(shí)現(xiàn)右側(cè)懸浮按鈕的伸縮動態(tài)效果
選中界面1-1或者界面1-2【動態(tài)面板】內(nèi)的文件組合，點(diǎn)擊添加交互中的【鼠標(biāo)移入時】&【鼠標(biāo)移出時】用例，匹配值相關(guān)動作。
步驟一：設(shè)置右側(cè)懸浮按鈕交互【鼠標(biāo)移入時】用例
在case1【組織動作】中添加【移動】動作，在【配置動作】內(nèi)夠遠(yuǎn)界面1-1【文件組合】，【移動】狀態(tài)選擇【到達(dá)】,x=0、y=y,【動畫】效果選擇【彈性】時間t=1000毫秒。
步驟二：設(shè)置右側(cè)懸浮按鈕交互【鼠標(biāo)移出時】用例
在case1【組織動作】中添加【移動】動作，在【配置動作】內(nèi)勾選界面1-1【文件組合】，【移動】狀態(tài)選擇【到達(dá)】,x=70、y=y,【動畫】效果選擇【彈性】時間t=1200毫秒。
1.2.2.1實(shí)現(xiàn)右側(cè)懸浮按鈕與內(nèi)聯(lián)框架的交互操作效果
選中【文字】元件，點(diǎn)擊【添加用例】中的【鼠標(biāo)單擊時】用例，配置相關(guān)的動作。
步驟一：設(shè)置右側(cè)懸浮按鈕觸發(fā)之后狀態(tài)的改變設(shè)置
在case1【組織動作】中添加【選中】動作，在【配置動作】內(nèi)勾選界面1-1和界面1-2【文件組合】內(nèi)的【橢圓形】和【背景】元件，界面1-1內(nèi)的【橢圓形】和【背景】勾選之后，設(shè)置選中狀態(tài)的值=true，界面1-2內(nèi)的【橢圓形】和【背景】勾選之后，設(shè)置選中狀態(tài)的值=false。
步驟二：設(shè)置右側(cè)懸浮按鈕觸發(fā)之后內(nèi)聯(lián)框架的交互設(shè)置
在case1【組織動作】中添加【選中】動作，在【配置動作】內(nèi)勾選【內(nèi)聯(lián)框架】，在【打開位置】勾選【鏈接到當(dāng)前項(xiàng)目的某個頁面】，并選擇【界面1-1】頁面，配置【內(nèi)聯(lián)框架】鏈接界面1-2與以上同理。
1.3預(yù)覽效果
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。