- 相關推薦
AXURE交互實例介紹
文章介紹了AXURE交互實例介紹，下面我們就與大家一起分享。就跟隨百分網小編一起去了解下吧，想了解更多相關信息請持續關注我們應屆畢業生考試網!
1、向下拉動屏幕出現[可刷新]的提示。
2、刷新要有加載過程。
3、刷新完成后屏幕歸位。
拖入一個與手機模型屏幕同尺寸的 Dynamic Panel，命名為[mask]，其主要的作用是作為后續所有元素的容器，因為要把操作的可視范圍限定在屏幕的空間內。
在[mask]中拖入一個稍高于屏幕尺寸的 Dynamic Panel，命名為[screen]，高出的部分是用于存放下拉時出現的刷新提示，高度自定，這里我設了 50px，同時將[screen]的位置坐標調整為 x0,y-50，目的是將刷新提示放置在可視范圍之外。
在[screen]中拖入一個與屏幕同尺寸的 Dynamic Panel，命名為[content]，添加兩個 State，分別命名為[content-1][content-2]，用于存放刷新前和刷新后的內容，同時把底色調為白色之外的任意色，目的是與刷新區域做一個區別。
在[screen]中再拖入一個與屏幕同寬，高為 50px 的 Dynamic Panel，命名為[refresh]，添加兩個 State，分別命名為[drag][drag drop]，用來存放刷新前和加載時的不同狀態提示。
為[mask]添加 OnDrag 事件，并設置動作 Move Panel，拖動方式為 with drag y，即只能沿縱軸方向移動。
為[mask]添加 OnDragDrop 事件，并設置動作：
1、Set Panel state to State，將[refresh]的 State 改為[drag drop]，實現加載提示。
2、Wait Time，為加載過程設置一個延遲時間，比如 1000ms。
3、Set Panel state to State，將[content]的 State 改為[content-2]，實現刷新后的效果。
好了，現在下拉刷新的效果已經可以實現了，但刷新后如何讓被下拉的屏幕歸位呢?這里就需要用到一個小技巧了。
拖入一個與屏幕同寬，高為 50px 的 Image Map Region 放置在屏幕的上方，命名為[header]保持它的下邊緣與[mask]的上邊緣有 2px～3px 的交集，用于判斷[mask]的拖動位置，從而讓其自動歸位。由于 Image Map Region 只是一個圖片熱點，所以在預覽時是不會被看到的。然后在[mask]的 OnDragDrop 事件中添加一個觸發條件，用于判斷[mask]的 area of widget 是否超出了[header]的范圍。
在條件下設置動作：
1、Wait Time，由于之前的加載過程需要 1000ms，所以這里也要設置一個相同的延遲時間用以歸位。
2、Move Panel，讓[mask]在加載結束后沿縱軸方向移動 −50px，即將高為 50px 的刷新區域再移動至可視范圍之外，實現自動歸位的效果。
3、Set Panel state to State，最后將[refresh]的 State 再改回[drag]，以便于再次刷新時的文案的正確。
搞定，需要注意的是動作的設置要遵從應有的順序，否則就出亂子了。
【AXURE交互實例介紹】相關文章：
實例學Axure7.0簡約教程09-02
axure生成網頁原型的方法10-13
axure網頁設計的方法有哪些10-23
axure怎么導出為pdf格式08-25
PHP中常用的實例介紹09-04
用實例介紹通道摳圖的PS教程05-07
交互頁面網頁設計07-19
Java實例化的四種方法介紹08-23
Javasocket應用實例08-17
php畫圖實例07-16