如何利用Axure RP 8實現倒計時的效果圖像

倒計時這個是經常用到的,那如何利用Axure RP 8實現這個效果呢?
場景是:一個按鈕觸發倒計時,點擊后,時間倒數,跟倒計時器一樣 。
下面利用一個實例實現這個倒計時,操作如下:

如何利用Axure RP 8實現倒計時的效果圖像


工具/原料Axure RP 8
瀏覽器
截圖工具
圖片工具
方法/步驟1第一步,打開Axure RP 8設計軟件,依此操作“項目---全局變量”,添加全局變量“timer”,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



2第二步,拖曳一個按鈕和面板到頁面,修改按鈕顯示內容為“倒計時”,兩個寬度一致,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



3第三步,選中面板雙擊,再添加一個面板狀態,根據具體的實際進行修改,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



4第四步,設置按鈕禁用時,按鈕的交互樣式;禁用時,按鈕背景色為灰色,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



5第五步,添加鼠標單擊實例,狀態為“Next”,向后循環、循環間隔1000毫秒,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



6第六步,設置禁用時組織動作,選擇禁用單選按鈕,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



7第七步,為全局變量添加條件,確保timer大于0;并設置timer在不斷減一,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



如何利用Axure RP 8實現倒計時的效果圖像



8【如何利用Axure RP 8實現倒計時的效果圖像】第八步,設置倒計時按鈕文本顯示內容,這里設置為倒計時秒數,如下圖所示:

如何利用Axure RP 8實現倒計時的效果圖像



注意事項注意鼠標單擊事件的用法
注意全局變量的設置和局部變量的區別

以上內容就是如何利用Axure RP 8實現倒計時的效果圖像的內容啦,希望對你有所幫助哦!

    猜你喜歡