1. 主页 > 行业资讯 > 设计文章 >

Axure RP 9教程:建行APP账号拖拽效果

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

建筑渲染/图解

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

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

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

Axure RP 9 教程—建行APP账户拖动效果

操作过程

第一步

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

Axure RP 9 教程—建行APP账户拖动效果

Axure RP 9 教程—建行APP账户拖动效果

第二步

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

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

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

Axure RP 9 教程—建行APP账户拖动效果

第三步

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

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

第四步

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

Axure RP 9 教程—建行APP账户拖动效果

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

第五步

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

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/515.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息