国产午夜亚洲精品国产成人_欧美屁股大的xxxxx_丰满巨肥大屁股bbw网站_日韩精品亚洲aⅴ在线影院_旧番剧精灵の森へようこそ

案例14:簡(jiǎn)單的滑動(dòng)解鎖

  • 2022-04-13 13:52:19
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.gtalker.cn

第一步:準(zhǔn)備好所需圖像素材,見圖1。

11.jpg

(圖1)

第二步:將4張圖像素材拖放到Axure設(shè)計(jì)區(qū)域(在學(xué)習(xí)過(guò)程中要養(yǎng)成給部件命名的好習(xí)慣),并將圖像移動(dòng)到恰當(dāng)位置,見圖2,在這里,昆明網(wǎng)站建設(shè)小編需要提醒注意的是:注意不同部件之間z坐標(biāo)的位置,也就是層級(jí)關(guān)系,可以通過(guò)【Outline頁(yè)面】面板進(jìn)行檢查,見圖3。

11.jpg

(圖2)

11.jpg

(圖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)閉【用例編輯器】。

11.jpg

(圖4)

此時(shí),單擊【預(yù)覽】按鈕,在瀏覽器中已經(jīng)可以水平拖動(dòng)slider圖像了,接下來(lái)添加【開鎖】交互,以通俗語(yǔ)言描述這個(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)回原來(lái)的位置。

第五步:選中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)閉【用例編輯器】。

11.jpg

(圖5)

現(xiàn)在,單擊【預(yù)覽】按鈕,在瀏覽器中測(cè)試效果,當(dāng)拖動(dòng)slider_dp結(jié)束時(shí),如果slider_dp范圍接觸到open,頁(yè)面就跳轉(zhuǎn)到page1,說(shuō)明上面的操作正確。

第六步:選中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)閉【用例編輯器】。

11.jpg

(圖6)

11.jpg

(圖7)

11.jpg

(圖8)

第七步:至此,簡(jiǎn)單的滑動(dòng)解鎖交互制作完畢,在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。


當(dāng)前文章標(biāo)題:案例14:簡(jiǎn)單的滑動(dòng)解鎖

當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3415.html

上一篇:動(dòng)態(tài)面板高級(jí)應(yīng)用

下一篇:案例15:完整的滑動(dòng)解鎖

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號(hào))