axure商城

小紅書APP登陸界面劃屏效果制作

有一款叫做小紅書的APP(不是小黃書)登陸界面做的非常清新脫俗,教他家用Axure模仿練習一下他的登陸界面劃屏效果,這個內容雖然有些多,但是制作方法并不難,耐心跟著做的話肯定沒問題噠!點擊觀看效果

效果分析

這個登陸界面中,我們需要做的效果有下面4個內容:

  1. 大圖和文字會隨著劃屏一起移動,非動態面板多個狀態切換,是同一層級的內容滑動。
  2. 背景圖匯隨著劃屏變為對應圖片并且放大
  3. 圖標會隨著劃屏變為對應圖標
  4. 頁碼會隨著劃屏切換到對應頁的效果

界面結構

大圖和文字

3屏寬的界面,將圖片和文字擺放在對應位置。

將外層動態面板縮小為1屏大小,起到限制顯示區域的作用。

A

背景圖

1個動態面板的3個狀態,每個狀態中是不同的圖。

B

圖標

3個相同位置的圖標,默認顯示第1個,隱藏其他2個。

QQ截圖20151210233526

頁碼

1個動態面板的3個狀態,每個狀態中表示不同的頁碼。

D

登陸和注冊按鈕

用矩形畫2個按鈕,本次教程中不涉及登錄之后的內容,所以不在這里做交互。

實現思路

建立全局變量page,默認值為1,代表當前的頁碼,各個元件根據page的值進行相應交互。

制作方法

拖動分為2類交互,1是拖動時,2是拖動結束時。

拖動時

QQ截圖20151210232546

將大圖和文字分別設置水平拖動,并且進行邊界限制,不做限制的話就可以左右無限拖拽了。

拖動結束時

QQ截圖20151210235103

拖動結束分為向左和向右拖動結束時2個交互類型,而拖動又分為大距離拖動和小距離拖動,大距離拖動結束時將跳轉到下一頁,小距離拖動結束時將保持當前頁。

所以我們應當設置條件來判斷拖動的距離,我們設拖動200為大小距離的閥值。

在這里要跟大家介紹一個函數——TotalDragX,這個函數的意思是從按下到抬起鼠標總共拖拽的距離。

如果拖拽距離大于200并且當前頁碼是第1第2頁的時候,滿足了大距離的拖動條件,則將[[page+1]]。

QQ截圖20151210234040

根據page值設置背景圖這個動態面板切換到對應的狀態,在選擇狀態中選擇Value(值),狀態名稱和序號中填寫全局變量[[page]],這樣是第幾頁就會切換到狀態幾了。

頁碼這個動態面板也是一樣的,切換到對應[[page]]的狀態。

而大圖和文字的,我們要根據[[page]]在拖動結束時跳轉到整數的頁面上,而不是卡在一半。

未標題-2

公式為[[(page-1)*-1屏寬度+左邊的空隙距離]]

【思路重點】大距離拖拽=拖拽成功,page+1,小距離拖拽=拖拽失敗,page不變。

QQ截圖20151211000051

拖動結束處于不同界面時,不同的icon和背景有不同的變化。

icon的變化:顯示當前page的icon,隱藏另外2個icon,當前page的icon以中心為錨點,線性動畫到原始尺寸。另外2個icon以中心為錨點,線性動畫到小尺寸

背景的變化:當前頁的背景圖由原尺寸放大,其他2個背景圖縮小的原尺寸。這樣才能在其他page再一次放大圖片時,依舊是從原始尺寸放大。需要注意的是,在這i類我們需要把動態面板放大到比原來的圖片尺寸大1像素,否則在你放大圖片的時候動態面板會跟著一起放大,圖片會出框。我在這里的做法是將動態面板高度+1,Y坐標-1。

至此,跟著教程將左拖拽結束時的交互做完了,下面來動動腦筋把向右拖拽做了吧!都是一樣的哦,只是有一些輕微的不同。如果還是比較迷茫的話你可以下載Axure源文件去仔細觀察學習.^_^.

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

如何用Axure軟件管理項目中的美術資源 從而提高效率

2015-11-25 17:38:14

案例教程

一款精美的提交按鈕效果制作

2015-12-20 4:24:25

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