第一步:準(zhǔn)備好所需圖像素材,見圖1。
(圖1)
第二步:將4張圖像素材拖放到Axure設(shè)計(jì)區(qū)域(在學(xué)習(xí)過程中要養(yǎng)成給部件命名的好習(xí)慣),并將圖像移動(dòng)到恰當(dāng)位置,見圖2,在這里,昆明網(wǎng)站建設(shè)小編需要提醒注意的是:注意不同部件之間z坐標(biāo)的位置,也就是層級(jí)關(guān)系,可以通過【Outline頁面】面板進(jìn)行檢查,見圖3。
(圖2)
(圖3)
第三步:選中slider圖像,單擊右鍵,在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】,并給動(dòng)態(tài)面板命名為slider_dp。
第四步:選中slider_dp動(dòng)態(tài)面板,在右側(cè)部件【屬性】面板中雙擊【拖動(dòng)時(shí)】事件,在彈出的【用例編輯器】中新增【移動(dòng)】動(dòng)作,在右側(cè)【配置動(dòng)作】中勾選slider_dp動(dòng)態(tài)面板,設(shè)置其移動(dòng)為【水平拖動(dòng)】,見圖4。單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖4)
此時(shí),單擊【預(yù)覽】按鈕,在瀏覽器中已經(jīng)可以水平拖動(dòng)slider圖像了,接下來添加【開鎖】交互,以通俗語言描述這個(gè)交互就是,當(dāng)鼠標(biāo)拖動(dòng)slider_dp結(jié)束時(shí)(或者手指按住slider_dp滑動(dòng)結(jié)束時(shí)),如果slider_dp接觸到了open,開鎖成功,跳轉(zhuǎn)到page1;如果未接觸到open,開鎖失敗, slider_dp要移動(dòng)回原來的位置。
第五步:選中slider_dp動(dòng)態(tài)面板,在右側(cè)部件【屬性】面板中雙擊【拖動(dòng)結(jié)束時(shí)】事件,在彈出的【用例編輯器】頂部單擊【添加條件】,見圖5。在彈出的【條件編輯器】對(duì)話框中編輯條件表達(dá)式,如圖6-A。在底部的條件描述中可以清晰看到當(dāng)前的條件描述,如果當(dāng)前部件范圍接觸到open部件范圍,見圖6-B,單擊【確定】按鈕關(guān)閉【條件編輯器】。條件設(shè)置完畢后,昆明網(wǎng)站制作小編認(rèn)為繼續(xù)在【用例編輯器】中添加動(dòng)作【在當(dāng)前窗口打開 page1】,見圖7,單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖5)
現(xiàn)在,單擊【預(yù)覽】按鈕,在瀏覽器中測試效果,當(dāng)拖動(dòng)slider_dp結(jié)束時(shí),如果slider_dp范圍接觸到open,頁面就跳轉(zhuǎn)到page1,說明上面的操作正確。
第六步:選中slider_dp,在右側(cè)部件【屬性】面板中再次雙擊【拖動(dòng)結(jié)束時(shí)】事件添加第二個(gè)用例。在彈出的【用例編輯器】中新增【移動(dòng)】動(dòng)作,在右側(cè)【配置動(dòng)作】中勾選slider_dp動(dòng)態(tài)面板,設(shè)置其【回到拖動(dòng)前位置】,動(dòng)畫【搖擺】,時(shí)間【200】毫秒,見圖8。單擊【確定】按鈕關(guān)閉【用例編輯器】。
(圖6)
(圖7)
(圖8)
第七步:至此,簡單的滑動(dòng)解鎖交互制作完畢,在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
當(dāng)前文章標(biāo)題:案例14:簡單的滑動(dòng)解鎖
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3415.html