- 相關(guān)推薦
AXURE交互實(shí)例介紹
文章介紹了AXURE交互實(shí)例介紹，下面我們就與大家一起分享。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
1、向下拉動(dòng)屏幕出現(xiàn)[可刷新]的提示。
2、刷新要有加載過(guò)程。
3、刷新完成后屏幕歸位。
拖入一個(gè)與手機(jī)模型屏幕同尺寸的 Dynamic Panel，命名為[mask]，其主要的作用是作為后續(xù)所有元素的容器，因?yàn)橐巡僮鞯目梢暦秶薅ㄔ谄聊坏目臻g內(nèi)。
在[mask]中拖入一個(gè)稍高于屏幕尺寸的 Dynamic Panel，命名為[screen]，高出的部分是用于存放下拉時(shí)出現(xiàn)的刷新提示，高度自定，這里我設(shè)了 50px，同時(shí)將[screen]的位置坐標(biāo)調(diào)整為 x0,y-50，目的是將刷新提示放置在可視范圍之外。
在[screen]中拖入一個(gè)與屏幕同尺寸的 Dynamic Panel，命名為[content]，添加兩個(gè) State，分別命名為[content-1][content-2]，用于存放刷新前和刷新后的內(nèi)容，同時(shí)把底色調(diào)為白色之外的任意色，目的是與刷新區(qū)域做一個(gè)區(qū)別。
在[screen]中再拖入一個(gè)與屏幕同寬，高為 50px 的 Dynamic Panel，命名為[refresh]，添加兩個(gè) State，分別命名為[drag][drag drop]，用來(lái)存放刷新前和加載時(shí)的不同狀態(tài)提示。
為[mask]添加 OnDrag 事件，并設(shè)置動(dòng)作 Move Panel，拖動(dòng)方式為 with drag y，即只能沿縱軸方向移動(dòng)。
為[mask]添加 OnDragDrop 事件，并設(shè)置動(dòng)作：
1、Set Panel state to State，將[refresh]的 State 改為[drag drop]，實(shí)現(xiàn)加載提示。
2、Wait Time，為加載過(guò)程設(shè)置一個(gè)延遲時(shí)間，比如 1000ms。
3、Set Panel state to State，將[content]的 State 改為[content-2]，實(shí)現(xiàn)刷新后的效果。
好了，現(xiàn)在下拉刷新的效果已經(jīng)可以實(shí)現(xiàn)了，但刷新后如何讓被下拉的屏幕歸位呢?這里就需要用到一個(gè)小技巧了。
拖入一個(gè)與屏幕同寬，高為 50px 的 Image Map Region 放置在屏幕的上方，命名為[header]保持它的下邊緣與[mask]的上邊緣有 2px～3px 的交集，用于判斷[mask]的拖動(dòng)位置，從而讓其自動(dòng)歸位。由于 Image Map Region 只是一個(gè)圖片熱點(diǎn)，所以在預(yù)覽時(shí)是不會(huì)被看到的。然后在[mask]的 OnDragDrop 事件中添加一個(gè)觸發(fā)條件，用于判斷[mask]的 area of widget 是否超出了[header]的范圍。
在條件下設(shè)置動(dòng)作：
1、Wait Time，由于之前的加載過(guò)程需要 1000ms，所以這里也要設(shè)置一個(gè)相同的延遲時(shí)間用以歸位。
2、Move Panel，讓[mask]在加載結(jié)束后沿縱軸方向移動(dòng) −50px，即將高為 50px 的刷新區(qū)域再移動(dòng)至可視范圍之外，實(shí)現(xiàn)自動(dòng)歸位的效果。
3、Set Panel state to State，最后將[refresh]的 State 再改回[drag]，以便于再次刷新時(shí)的文案的正確。
搞定，需要注意的是動(dòng)作的設(shè)置要遵從應(yīng)有的順序，否則就出亂子了。
【AXURE交互實(shí)例介紹】相關(guān)文章：
Axure交互實(shí)例教程07-19
Axure常用交互實(shí)例教程09-12
Axure交互實(shí)例教程：日歷控件選擇日期09-11
Axure交互實(shí)例教程的日歷控件選擇日期09-26
Axure常用交互效果10-12
Axure常用交互效果制作06-13
解讀交互設(shè)計(jì)-Axure原型交互輸出11-12