今天簡單用動(dòng)態(tài)面板模擬一下建行APP首頁銀行賬戶左右拖動(dòng)的效果，一起來看看~

效果圖

本次效果是卡片拖動(dòng)的效果，在“總資產(chǎn)”狀態(tài)下，我們能看到總資產(chǎn)情況和“銀行卡1的一半”，當(dāng)滑動(dòng)屏幕時(shí)，淺色的“銀行卡1”向左移動(dòng)到原來“總資產(chǎn)”的位置，并且同時(shí)顏色從淺色變成白色。

這個(gè)效果和Banner相比多了一點(diǎn)交互，就是在當(dāng)前狀態(tài)可以看到下一張狀態(tài)的一半，可以給用戶一定的引導(dǎo)，讓用戶去滑動(dòng)。

交互操作鏈接：https://www.wulihub.com.cn/go/QOPo4J/start.html

操作步驟

第一步

我們先繪制好我們需要的元件，另外需要一個(gè)動(dòng)態(tài)面板，把賬號(hào)信息放在動(dòng)態(tài)面板內(nèi)。（注意，賬戶信息的部分，中間是白色，兩邊是灰色，我這里是選了白色加了35%的透明度）

第二步

我們需要復(fù)制出來三個(gè)賬戶信息部分的圖，依次排開，用來記錄他們的橫坐標(biāo)，后邊需要用。

可以看到三個(gè)相同模塊的橫坐標(biāo)分別是0，-288，-578。

我們把X=-288的一塊拖動(dòng)到手機(jī)模型中，放置在合適的位置，并轉(zhuǎn)換為動(dòng)態(tài)面板。

第三步

我們選擇第一步中創(chuàng)建的動(dòng)態(tài)面板，新增兩個(gè)狀態(tài)，三個(gè)狀態(tài)分別命名為“總資產(chǎn)狀態(tài)”、“銀行卡1狀態(tài)”、“銀行卡2狀態(tài)”。

然后分別在每個(gè)狀態(tài)內(nèi)添加賬戶信息的內(nèi)容，需要注意，同樣，中間為白色，兩邊為淺色。

第四步

增加交互，我們選中動(dòng)態(tài)面板的第一個(gè)狀態(tài)，選中總資產(chǎn)的狀態(tài)，添加如圖所示的交互：

解釋：向左拖動(dòng)時(shí)，讓動(dòng)態(tài)面板到達(dá)之前記錄好的坐標(biāo) -576，時(shí)長是300ms，等待300ms，讓動(dòng)態(tài)面板切換為“銀行卡1狀態(tài)”的狀態(tài)（此時(shí)完成了拖動(dòng)，拖動(dòng)過程中銀行卡1是淺色，而且在完成拖動(dòng)之后，立刻切換成了另一個(gè)狀態(tài)，讓銀行卡1的信息變?yōu)榘咨纬梢粋€(gè)非常舒適的交互）。最后讓當(dāng)前動(dòng)態(tài)面板重新移動(dòng)到-287的位置，因?yàn)槲覀円寗?dòng)態(tài)面板重新回到原來的位置，如果不歸位，會(huì)導(dǎo)致下一次再切換到這里的時(shí)候，頁面位置是錯(cuò)誤的。向右拖動(dòng)時(shí)，原理相同，不做解釋。

第五步

最后選中其他幾個(gè)狀態(tài)，按照相同原理添加交互，結(jié)束～

結(jié)語

原型鏈接：https://pan.baidu.com/s/11rIQ9aq_d8OF8-s9oNbKTA

提取密碼：da7m

交互操作鏈接：https://www.wulihub.com.cn/go/QOPo4J/start.html

#專欄作家#

王得宇A(yù)IPM；公眾號(hào)：他們已經(jīng)在路上了（ID：PM-Silence），人人都是產(chǎn)品經(jīng)理專欄作家

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議