1. 程式人生 > >Axure中實現頁面跳轉倒計時

Axure中實現頁面跳轉倒計時

在瀏覽一個頁面時,如果跳轉到下一個頁面,一般需要等待幾秒,有些網站就會產生倒計時等待的狀態,這樣一個效果暫且稱為Axure頁面跳轉倒計時。在Axure(http://www.axurechina.cc/)中要實現這樣一個效果需要用到幾個簡單的互動效果,以下將是具體操作流程。關於頁面跳轉的設定還有一個教程可以參考:如何實現Axure頁面之間的跳轉,此篇內容主要是關於點選一個文字狀態觸發跳轉到相關內容的頁面的教學。
首先在網站下載Axure(http://www.axurechina.cc/download.html)軟體執行開啟,然後在空白頁面拖入一個矩形元件,輸入以下文字資訊,為了將資訊醒目,字號儘量設定的大一些,比如為72號字型,實現六秒倒計時之後開始跳轉。

拖入一個一級標題,輸入數字“6”,命名為倒計時”,為了好區分,顏色可更改為綠色(個人選擇),字號也設為72:

然後拖入一個動態面板,動態面板主要起到觸發器的作用,所以不需要實質上的內容,我們需要設定一下它的屬性。互動中新增用例,選擇“顯示時”,設定當前元件為顯示時隱藏,只有不斷的觸發才會產生倒計時的效果:

然後接著單擊互動中的“隱藏時”設定等待,等待時間為一秒,然後再設定文字值為5。

為了使讀秒不一直無限讀下去,需要給它新增觸發條件,當大於0時,便觸發這個條件。

新增完條件之後,如果要觸發這個倒計時,需要在新增事件中重複新增等待,文字值依次改成5、4、3、2、1、0,然後單擊右側“隱藏”,將“動態面板”隱藏,如下圖所示:

所有的互動設定完成之後,最後只需將動態面板設定為“載入時”隱藏,點選確定之後Axure實現倒計時頁面跳轉,可以點選預覽。

以上內容就是Axure頁面跳轉倒計時的實現過程,如果想要學習更多教程 ,可以去Axure教程(http://www.axurechina.cc/help.html)檢視軟體教程。
本篇文章分享來源於:http://www.axurechina.cc/help/1261.html