Axure RP使用攻略--動態面板滑動效果(10)


示例原型:http://pan.baidu.com/s/1mgjYahi

實現目標:

1、  點擊登錄滑出登錄面板

2、  點擊確定滑出動態面板

最終效果如下:

gaollg1

這種效果可以通過兩種方法實現:

首先准備需要的元件:1個矩形,1個文本,1個動態面板(里面包含2個矩形,一個作為面板,一個作為登錄按鈕)

把動態面板添加一個狀態,准備工作就結束了。

注意:每個主要元件記得加上標簽啊!

 

第一種:動態面板滑入滑出方式

1、  設置文本面板“登錄”的onclick事件,為點擊時動態面板滑動到絕對位置(x,y)(如圖1),x和y代表滑動到指定位置時的x軸與y軸的坐標值(如圖2、圖3),坐標值可以通過拖動動態面板到指定位置取得。最后,設置動畫效果為緩慢進入。

圖1

4-3

圖2

4-1

圖3

4-2

2、  設置動態面板狀態1里面的矩形登錄按鈕的onclick事件,為點擊時動態面板滑動到絕對位置(x,y)(如圖4),這時的x和y代表滑動到初始位置時的x軸與y軸的坐標值,設置動畫效果為緩慢退出。

圖4

4-4

3、  點擊右鍵設置順序為置於底層,並將動態面板拖到初始位置。

4、  第一種方式完成,可以生成原型看效果了。

 

第二種:動態面板狀態切換方式

在開始的時候我們給動態面板增加了一個狀態,在第二種方式里它才會起到作用,怎么做呢?我們繼續:

1、  把動態面板拖到最終顯示的位置,將動態面板狀態2上移到第一位(如圖5右側指示);

2、  設置文本面板“登錄”的onclick事件,為點擊時設置動態面板的狀態為狀態1,並設置進行動畫為向下滑動(如圖5);

圖5

4-5

3、  設置動態面板狀態1里面的矩形登錄按鈕的onclick事件,為點擊時設置動態面板的狀態為狀態2,並設置退出動畫為向上滑動。

4、  第二種方式完成,生成原型就能看到想要的效果了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM