軟件開發中,經常會用到TopAlertView效果,作為提示,那麼怎麼在Axure中實現這一效果呢?
工具/原料
Axure 7.0
方法/步驟
在Axure畫布中拖入一個手機框,並在手機框中,拖入四個矩形,大小為100x30,將矩形轉化為圓角,並設置陰影效果。
為四個矩形分別命名:info、Success、warning、error
為四個矩形設置點擊效果,鼠標點擊時,字體變大,並加粗
在手機框頂部拖入一個動態面板,大小為310x50,命名為TopAlertView,為TopAlertView設置四個狀態,分別為:info、Success、warning、error
分別在四個狀態中添加不同的效果圖片,如圖所示
1、為info按鈕設置點擊事件,當點擊info按鈕時,設置info按鈕本身左右擺動。
2、設置TopAlertView動態面板顯示,狀態為info,同時動態面板具有向下滑動和斜著擺動兩種屬性
3、Success按鈕和info按鈕的點擊事件基本相同
1、移動wraning按鈕相對位置為(5,0),擺動500ms
2、等待100毫秒
3、移動warning相對位置為(-5,0),擺動500ms
4、顯示TopAlertView淡入淡出100ms
5、設置TopAlertView狀態為warning
6、移動TopAlertView相對位置為(10,4)擺動100ms
7、等待100ms
8、移動TopAlertView相對位置為(-10,4),擺動100ms
9、顯示warn01彈出效果(warn01為帶有歎號的小圖標,一開始默認為隱藏)