AxureRP9教程：建行APP账户拖动效果

　　今天简单用动态面板模拟一下建行APP首页银行账户左右拖动的效果，一起来看看
　　效果图
　　本次效果是卡片拖动的效果，在“总资产”状态下，我们能看到总资产情况和“银行卡1的一半”，当滑动屏幕时，浅色的“银行卡1”向左移动到原来“总资产”的位置，并且同时颜色从浅色变成白色。
　　这个效果和Banner相比多了一点交互，就是在当前状态可以看到下一张状态的一半，可以给用户一定的引导，让用户去滑动。
　　交互操作链接：https：www。wulihub。com。cngoQOPo4Jstart。html
　　操作步骤
　　第一步
　　我们先绘制好我们需要的元件，另外需要一个动态面板，把账号信息放在动态面板内。（注意，账户信息的部分，中间是白色，两边是灰色，我这里是选了白色加了35的透明度）
　　第二步
　　我们需要复制出来三个账户信息部分的图，依次排开，用来记录他们的横坐标，后边需要用。
　　可以看到三个相同模块的横坐标分别是0，288，578。
　　我们把X288的一块拖动到手机模型中，放置在合适的位置，并转换为动态面板。
　　第三步
　　我们选择第一步中创建的动态面板，新增两个状态，三个状态分别命名为“总资产状态”、“银行卡1状态”、“银行卡2状态”。
　　然后分别在每个状态内添加账户信息的内容，需要注意，同样，中间为白色，两边为浅色。
　　第四步
　　增加交互，我们选中动态面板的第一个状态，选中总资产的状态，添加如图所示的交互：
　　解释：向左拖动时，让动态面板到达之前记录好的坐标576，时长是300ms，等待300ms，让动态面板切换为“银行卡1状态”的状态（此时完成了拖动，拖动过程中银行卡1是浅色，而且在完成拖动之后，立刻切换成了另一个状态，让银行卡1的信息变为白色，形成一个非常舒适的交互）。最后让当前动态面板重新移动到287的位置，因为我们要让动态面板重新回到原来的位置，如果不归位，会导致下一次再切换到这里的时候，页面位置是错误的。向右拖动时，原理相同，不做解释。
　　第五步
　　最后选中其他几个状态，按照相同原理添加交互，结束～
　　结语
　　原型链接：https：pan。baidu。coms11rIQ9aqd8OF8s9oNbKTA
　　提取密码：da7m
　　交互操作链接：https：www。wulihub。com。cngoQOPo4Jstart。html