中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

效果圖

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

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

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

操作步驟

第一步

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

第二步

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

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

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

第三步

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

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

第四步

增加交互，我們選中動態(tài)面板的第一個狀態(tài)，選中總資產的狀態(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)，按照相同原理添加交互，結束～

結語

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

提取密碼：da7m

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

#專欄作家#

王得宇AIPM；公眾號：他們已經在路上了（ID：PM-Silence），人人都是產品經理專欄作家

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

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