Axure實現TopAlertView效果?

Tags: 圖片, 效果,

軟件開發中,經常會用到TopAlertView效果,作為提示,那麼怎麼在Axure中實現這一效果呢?

工具/原料

Axure 7.0

方法/步驟

在Axure畫布中拖入一個手機框,並在手機框中,拖入四個矩形,大小為100x30,將矩形轉化為圓角,並設置陰影效果。

為四個矩形分別命名:info、Success、warning、error

Axure實現TopAlertView效果

為四個矩形設置點擊效果,鼠標點擊時,字體變大,並加粗

Axure實現TopAlertView效果

在手機框頂部拖入一個動態面板,大小為310x50,命名為TopAlertView,為TopAlertView設置四個狀態,分別為:info、Success、warning、error

Axure實現TopAlertView效果

分別在四個狀態中添加不同的效果圖片,如圖所示

Axure實現TopAlertView效果

Axure實現TopAlertView效果

Axure實現TopAlertView效果

Axure實現TopAlertView效果

1、為info按鈕設置點擊事件,當點擊info按鈕時,設置info按鈕本身左右擺動。

2、設置TopAlertView動態面板顯示,狀態為info,同時動態面板具有向下滑動和斜著擺動兩種屬性

3、Success按鈕和info按鈕的點擊事件基本相同

Axure實現TopAlertView效果

Axure實現TopAlertView效果

Axure實現TopAlertView效果

Axure實現TopAlertView效果

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為帶有歎號的小圖標,一開始默認為隱藏)

Axure實現TopAlertView效果

Axure實現TopAlertView效果

Axure實現TopAlertView效果

相關問題答案