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

效果圖

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

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

交互操作鏈接：

https://www.wulihub.com.cn/go/QOPo4J/start.html

操作步驟：

第一步：

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

第二步：

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

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

我們把X=-288的一塊拖動到手機模型中，放置在合適的位置，并轉(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)面板到達之前記錄好的坐標 -576，時長是300ms，等待300ms，讓動態(tài)面板切換為“銀行卡1狀態(tài)”的狀態(tài)（此時完成了拖動，拖動過程中銀行卡1是淺色，而且在完成拖動之后，立刻切換成了另一個狀態(tài)，讓銀行卡1的信息變?yōu)榘咨?，形成一個非常舒適的交互），最后讓當前動態(tài)面板重新移動到-287的位置，因為我們要讓動態(tài)面板重新回到原來的位置，如果不歸位，會導致下一次再切換到這里的時候，頁面位置是錯誤的。向右拖動時，原理相同，不做解釋。

第五步：

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

結(jié)語

原型鏈接：

https://pan.baidu.com/s/11rIQ9aq_d8OF8-s9oNbKTA

提取密碼：da7m

交互操作鏈接：

https://www.wulihub.com.cn/go/QOPo4J/start.html

感謝支持～

作者：王得宇AIPM

微信公眾號：他們已經(jīng)在路上了