小紅書APP登陸界面劃屏效果制作
發(fā)布時(shí)間:2022-03-19 10:53 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2649

效果分析

這個(gè)登陸界面中,我們需要做的效果有下面4個(gè)內(nèi)容:

  1. 大圖和文字會(huì)隨著劃屏一起移動(dòng),非動(dòng)態(tài)面板多個(gè)狀態(tài)切換,是同一層級(jí)的內(nèi)容滑動(dòng)。
  2. 背景圖匯隨著劃屏變?yōu)閷?duì)應(yīng)圖片并且放大
  3. 圖標(biāo)會(huì)隨著劃屏變?yōu)閷?duì)應(yīng)圖標(biāo)
  4. 頁(yè)碼會(huì)隨著劃屏切換到對(duì)應(yīng)頁(yè)的效果

界面結(jié)構(gòu)

大圖和文字

3屏寬的界面,將圖片和文字?jǐn)[放在對(duì)應(yīng)位置。

將外層動(dòng)態(tài)面板縮小為1屏大小,起到限制顯示區(qū)域的作用。

A

背景圖

1個(gè)動(dòng)態(tài)面板的3個(gè)狀態(tài),每個(gè)狀態(tài)中是不同的圖。

B

圖標(biāo)

3個(gè)相同位置的圖標(biāo),默認(rèn)顯示第1個(gè),隱藏其他2個(gè)。

QQ截圖20151210233526

頁(yè)碼

1個(gè)動(dòng)態(tài)面板的3個(gè)狀態(tài),每個(gè)狀態(tài)中表示不同的頁(yè)碼。

D

登陸和注冊(cè)按鈕

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

實(shí)現(xiàn)思路

建立全局變量page,默認(rèn)值為1,代表當(dāng)前的頁(yè)碼,各個(gè)元件根據(jù)page的值進(jìn)行相應(yīng)交互。

制作方法

拖動(dòng)分為2類交互,1是拖動(dòng)時(shí),2是拖動(dòng)結(jié)束時(shí)。

拖動(dòng)時(shí)

QQ截圖20151210232546

將大圖和文字分別設(shè)置水平拖動(dòng),并且進(jìn)行邊界限制,不做限制的話就可以左右無(wú)限拖拽了。

拖動(dòng)結(jié)束時(shí)

QQ截圖20151210235103

拖動(dòng)結(jié)束分為向左和向右拖動(dòng)結(jié)束時(shí)2個(gè)交互類型,而拖動(dòng)又分為大距離拖動(dòng)和小距離拖動(dòng),大距離拖動(dòng)結(jié)束時(shí)將跳轉(zhuǎn)到下一頁(yè),小距離拖動(dòng)結(jié)束時(shí)將保持當(dāng)前頁(yè)。

所以我們應(yīng)當(dāng)設(shè)置條件來(lái)判斷拖動(dòng)的距離,我們?cè)O(shè)拖動(dòng)200為大小距離的閥值。

在這里要跟大家介紹一個(gè)函數(shù)——TotalDragX,這個(gè)函數(shù)的意思是從按下到抬起鼠標(biāo)總共拖拽的距離。

如果拖拽距離大于200并且當(dāng)前頁(yè)碼是第1第2頁(yè)的時(shí)候,滿足了大距離的拖動(dòng)條件,則將[[page+1]]。

QQ截圖20151210234040

根據(jù)page值設(shè)置背景圖這個(gè)動(dòng)態(tài)面板切換到對(duì)應(yīng)的狀態(tài),在選擇狀態(tài)中選擇Value(值),狀態(tài)名稱和序號(hào)中填寫全局變量[[page]],這樣是第幾頁(yè)就會(huì)切換到狀態(tài)幾了。

頁(yè)碼這個(gè)動(dòng)態(tài)面板也是一樣的,切換到對(duì)應(yīng)[[page]]的狀態(tài)。

而大圖和文字的,我們要根據(jù)[[page]]在拖動(dòng)結(jié)束時(shí)跳轉(zhuǎn)到整數(shù)的頁(yè)面上,而不是卡在一半。

未標(biāo)題-2

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

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

QQ截圖20151211000051

拖動(dòng)結(jié)束處于不同界面時(shí),不同的icon和背景有不同的變化。

icon的變化:顯示當(dāng)前page的icon,隱藏另外2個(gè)icon,當(dāng)前page的icon以中心為錨點(diǎn),線性動(dòng)畫到原始尺寸。另外2個(gè)icon以中心為錨點(diǎn),線性動(dòng)畫到小尺寸

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

至此,跟著教程將左拖拽結(jié)束時(shí)的交互做完了,下面來(lái)動(dòng)動(dòng)腦筋把向右拖拽做了吧!都是一樣的哦,只是有一些輕微的不同。

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC