axure商城

Axure實例教程:動感切換登錄注冊面板

好久沒有做了,今天做一次!

使用AxureRP8中的一些基本功能,我們實現一個動態切換的登錄注冊面板。

效果圖:

有沒有感覺很滑、很爽的樣子?

接下來,例行公事。

先做分析,再實現步驟。

問:用戶做了什么?

答:用戶點擊了兩個標簽。

問:給用戶什么反饋?

兩個頂部的標簽被【鼠標單擊時】要完成以下動作:

  • 被點擊的標簽需要放大尺寸,而另外一個標簽需要縮小尺寸。
  • 與上一個動作同時,登錄注冊面板要對應的切換內容。

好了,分析完畢,接下來我們看實現過程。

一、準備元件

兩個標簽用無邊框矩形,分別命名為“LoginTag”和“RegisterTag”,然后,設置不同的填充顏色,并且設置圓角后,在樣式中取消3個不需要的圓角。

下方的面板,我們使用動態面板,命名為“Panel”,雙擊打開動態面板管理,修改“State1”的命名為“Login”;然后,點添加按鈕,新增一個狀態,并命名為“Register”;最后,在動態面板的兩個狀態中,分別放入登錄面板的元件和注冊面板的元件。

提示:這一步操作也可以先做好登錄面板,全選登錄面板的元件,點擊鼠標右鍵,選擇【轉換為動態面板】,然后雙擊動態面板,點中第一個狀態后,點重復按鈕,在新添加的狀態中將登錄面板內容改為注冊面板內容。

二、添加交互

1、為每個元件添加【鼠標單擊時】的交互,動作為【設置尺寸】于“當前元件”為放大后的尺寸,設置另外一個元件為縮小后的尺寸,動畫選擇【線性】時長為“500”毫秒。不過要注意,元件“LoginTag”的錨點是【左上角】或【左側】,元件“RegisterTag”的錨點是【右上角】或【右側】。

2、繼續在用例中添加動作【設置面版狀態】于“Panel”為對應的狀態,并設置【進入動畫】和【退出動畫】,時長均為“500”毫秒。

注意:兩個動畫方向保持一致,并且選擇狀態為“Login”時,動畫是【向右滑動】,選擇狀態為【Register】時,動畫是【向左滑動】。

到這里,我們就完成了這個帶有動態切換效果面板的制作。

推薦關注:本站微信訂閱號“iaxure”(二維碼在本站頁面右上方),及時獲取本站最新動態內容。

硬廣插入:《兩天掌握Axure RP 8》線下培訓,北京、上海正在招生,報名地址【點此進入】

源文件下載:【點擊下載

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

Axure系列教程:抖音短視頻中小元件的交互動效(上)

2017-11-15 10:10:30

案例教程

axure教程之畫百分比環形圖

2018-5-27 15:54:27

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo