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

效果圖

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

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

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

操作步驟

第一步

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

第二步

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

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

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

第三步

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

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

第四步

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

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

第五步

最后選中其他幾個狀態(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；公眾號：他們已經(jīng)在路上了（ID：PM-Silence），人人都是產(chǎn)品經(jīng)理專欄作家

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

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