Axure制作动态切换的登录注册面板

Axure制作动态切换的登录注册面板

Axure可以制作高保真的网页模型,要想实现一个登陆面板不是很难,那么如果要实现一个动态的登陆注册的面板要怎么操作呢?今天将会和大家分享一下相关教程,感兴趣得朋友可以参考一下。

一、准备元件

两个标签用无边框矩形,分别命名为“LoginTag”和“RegisterTag”,然后,设置不同的填充颜色,并且设置圆角后,在样式中取消3个不需要的圆角。

Axure圆角

下方的面板,我们使用动态面板,命名为“Panel”,双击打开动态面板管理,修改“State1”的命名为“Login”;然后,点添加按钮,新增一个状态,并命名为“Register”;最后,在动态面板的两个状态中,分别放入登录面板的元件和注册面板的元件。

Axure面板状态管理

提示:这一步操作也可以先做好登录面板,全选登录面板的元件,点击鼠标右键,选择【转换为动态面板】,然后双击动态面板,点中第一个状态后,点重复按钮,在新添加的状态中将登录面板内容改为注册面板内容。

二、添加交互

1、为每个元件添加【鼠标单击时】的交互,动作为【设置尺寸】于“当前元件”为放大后的尺寸,设置另外一个元件为缩小后的尺寸,动画选择【线性】时长为“500”毫秒。不过要注意,元件“LoginTag”的锚点是【左上角】或【左侧】,元件“RegisterTag”的锚点是【右上角】或【右侧】。

Axure添加交互

2、继续在用例中添加动作【设置面版状态】于“Panel”为对应的状态,并设置【进入动画】和【退出动画】,时长均为“500”毫秒。

注意:两个动画方向保持一致,并且选择状态为“Login”时,动画是【向右滑动】,选择状态为【Register】时,动画是【向左滑动】。

Axure设置面板状态

以上就完成了带有动态切换效果面板的制作,希望对你有帮助。如果有更多感兴趣的内容,可以访问Axure中文网,了解更多资讯。

在线客服
客服邮箱
客服电话
17051276424