示例原型:http://pan.baidu.com/s/1mgjYahi
實現目標:
1、 點擊登錄滑出登錄面板
2、 點擊確定滑出動態面板
最終效果如下:
這種效果可以通過兩種方法實現:
首先准備需要的元件:1個矩形,1個文本,1個動態面板(里面包含2個矩形,一個作為面板,一個作為登錄按鈕)
把動態面板添加一個狀態,准備工作就結束了。
注意:每個主要元件記得加上標簽啊!
第一種:動態面板滑入滑出方式
1、 設置文本面板“登錄”的onclick事件,為點擊時動態面板滑動到絕對位置(x,y)(如圖1),x和y代表滑動到指定位置時的x軸與y軸的坐標值(如圖2、圖3),坐標值可以通過拖動動態面板到指定位置取得。最后,設置動畫效果為緩慢進入。
圖1
圖2
圖3
2、 設置動態面板狀態1里面的矩形登錄按鈕的onclick事件,為點擊時動態面板滑動到絕對位置(x,y)(如圖4),這時的x和y代表滑動到初始位置時的x軸與y軸的坐標值,設置動畫效果為緩慢退出。
圖4
3、 點擊右鍵設置順序為置於底層,並將動態面板拖到初始位置。
4、 第一種方式完成,可以生成原型看效果了。
第二種:動態面板狀態切換方式
在開始的時候我們給動態面板增加了一個狀態,在第二種方式里它才會起到作用,怎么做呢?我們繼續:
1、 把動態面板拖到最終顯示的位置,將動態面板狀態2上移到第一位(如圖5右側指示);
2、 設置文本面板“登錄”的onclick事件,為點擊時設置動態面板的狀態為狀態1,並設置進行動畫為向下滑動(如圖5);
圖5
3、 設置動態面板狀態1里面的矩形登錄按鈕的onclick事件,為點擊時設置動態面板的狀態為狀態2,並設置退出動畫為向上滑動。
4、 第二種方式完成,生成原型就能看到想要的效果了。