今天简单用动态面板模拟建行APP首页左右拖动银行账户的效果。来看看吧~

建筑渲染/图解

这个效果就是拖卡的效果。在“总资产”状态下，可以看到总资产和“银行卡1的一半”。滑动屏幕时，浅色的“银行卡1”向左移动到“总资产”原来的位置，同时颜色由浅变白。

相比Banner，这个效果的交互多了一点，就是在当前状态下，可以看到下一个状态的一半，可以给用户一些指导，让用户滑动。

互动链接:https://www.wulihub.com.cn/go/QOPo4J/start.html

操作过程

第一步

我们首先绘制我们需要的组件，我们还需要一个动态面板，其中放置了账户信息。(注意账户信息中间是白色，两边是灰色。我在这里选择了透明度为35%的白色。)

第二步

我们需要抄出三个账户信息部分的图，依次排列记录它们的横坐标，以后需要用到。

可以看出，三个相同模块的横坐标分别为0，-288和-578。

我们把一块X=-288拖进手机模型，放在合适的位置，转换成动态面板。

第三步

我们选择第一步创建的动态面板，添加两个新状态，分别命名为“总资产状态”、“银行卡1状态”和“银行卡2状态”。

然后分别添加每个状态下的账户信息内容。需要注意的是中间是白色，两边是浅色。

第四步

要添加交互，我们选择动态面板的第一个状态，选择总资产的状态，添加交互如下图所示:

说明:向左拖动时，让动态面板到达之前记录的坐标-576，等待300ms，这样动态面板就可以切换到“银行卡1状态”的状态(此时拖动完成，银行卡1在拖动过程中变亮，拖动完成后立即切换到另一个状态，使银行卡1的信息变成白色，形成非常舒适的交互)。最后，让当前动态面板移回-287的位置，因为我们想让动态面板回到原来的位置。如果它没有回到原来的位置，下次在这里切换时，页面位置将是错误的。向右拖的时候原理是一样的，不做解释。

第五步

最后选择其他几个状态，按照同样的原理添加交互，结束~