欧美日韩不卡一区二区三区,www.蜜臀.com,高清国产一区二区三区四区五区,欧美日韩三级视频,欧美性综合,精品国产91久久久久久,99a精品视频在线观看

網(wǎng)頁設計

AXURE交互實例介紹

時間:2025-04-17 17:41:32 網(wǎng)頁設計 我要投稿
  • 相關推薦

AXURE交互實例介紹

  文章介紹了AXURE交互實例介紹,下面我們就與大家一起分享。就跟隨百分網(wǎng)小編一起去了解下吧,想了解更多相關信息請持續(xù)關注我們應屆畢業(yè)生考試網(wǎng)!

  1、向下拉動屏幕出現(xiàn)[可刷新]的提示。

  2、刷新要有加載過程。

  3、刷新完成后屏幕歸位。

  拖入一個與手機模型屏幕同尺寸的 Dynamic Panel,命名為[mask],其主要的作用是作為后續(xù)所有元素的容器,因為要把操作的可視范圍限定在屏幕的空間內(nèi)。

  在[mask]中拖入一個稍高于屏幕尺寸的 Dynamic Panel,命名為[screen],高出的部分是用于存放下拉時出現(xiàn)的刷新提示,高度自定,這里我設了 50px,同時將[screen]的位置坐標調(diào)整為 x0,y-50,目的是將刷新提示放置在可視范圍之外。

  在[screen]中拖入一個與屏幕同尺寸的 Dynamic Panel,命名為[content],添加兩個 State,分別命名為[content-1][content-2],用于存放刷新前和刷新后的內(nèi)容,同時把底色調(diào)為白色之外的任意色,目的是與刷新區(qū)域做一個區(qū)別。

  在[screen]中再拖入一個與屏幕同寬,高為 50px 的 Dynamic Panel,命名為[refresh],添加兩個 State,分別命名為[drag][drag drop],用來存放刷新前和加載時的不同狀態(tài)提示。

  為[mask]添加 OnDrag 事件,并設置動作 Move Panel,拖動方式為 with drag y,即只能沿縱軸方向移動。

  為[mask]添加 OnDragDrop 事件,并設置動作:

  1、Set Panel state to State,將[refresh]的 State 改為[drag drop],實現(xiàn)加載提示。

  2、Wait Time,為加載過程設置一個延遲時間,比如 1000ms。

  3、Set Panel state to State,將[content]的 State 改為[content-2],實現(xiàn)刷新后的效果。

  好了,現(xiàn)在下拉刷新的效果已經(jīng)可以實現(xiàn)了,但刷新后如何讓被下拉的屏幕歸位呢?這里就需要用到一個小技巧了。

  拖入一個與屏幕同寬,高為 50px 的 Image Map Region 放置在屏幕的上方,命名為[header]保持它的下邊緣與[mask]的上邊緣有 2px~3px 的交集,用于判斷[mask]的拖動位置,從而讓其自動歸位。由于 Image Map Region 只是一個圖片熱點,所以在預覽時是不會被看到的。然后在[mask]的 OnDragDrop 事件中添加一個觸發(fā)條件,用于判斷[mask]的 area of widget 是否超出了[header]的范圍。

  在條件下設置動作:

  1、Wait Time,由于之前的加載過程需要 1000ms,所以這里也要設置一個相同的延遲時間用以歸位。

  2、Move Panel,讓[mask]在加載結(jié)束后沿縱軸方向移動 −50px,即將高為 50px 的刷新區(qū)域再移動至可視范圍之外,實現(xiàn)自動歸位的效果。

  3、Set Panel state to State,最后將[refresh]的 State 再改回[drag],以便于再次刷新時的文案的正確。

  搞定,需要注意的是動作的設置要遵從應有的順序,否則就出亂子了。

【AXURE交互實例介紹】相關文章:

Axure交互實例教程07-19

Axure常用交互實例教程09-12

Axure交互實例教程:日歷控件選擇日期09-11

Axure交互實例教程的日歷控件選擇日期09-26

Axure常用交互效果10-12

Axure常用交互效果制作06-13

解讀交互設計-Axure原型交互輸出11-12

實例學Axure7.0簡約教程09-02

Axure中RP基本交互設計簡介10-29