Axure正版代理
北京口耳相传科技有限公司旗下网站

Axure实例教程:动感切换登录注册面板

axure商城

好久没有做了,今天做一次!

使用AxureRP8中的一些基本功能,我们实现一个动态切换的登录注册面板。

效果图:

有没有感觉很滑、很爽的样子?

接下来,例行公事。

先做分析,再实现步骤。

问:用户做了什么?

答:用户点击了两个标签。

问:给用户什么反馈?

两个顶部的标签被【鼠标单击时】要完成以下动作:

  • 被点击的标签需要放大尺寸,而另外一个标签需要缩小尺寸。
  • 与上一个动作同时,登录注册面板要对应的切换内容。

好了,分析完毕,接下来我们看实现过程。

一、准备元件

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

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

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

二、添加交互

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

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

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

到这里,我们就完成了这个带有动态切换效果面板的制作。

推荐关注:本站微信订阅号“iaxure”(二维码在本站页面右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址【点此进入】

源文件下载:【点击下载

赞(8)
转载请注明出处:Axure中文网 » Axure实例教程:动感切换登录注册面板

评论 7

评论前必须登录!

 

  1. #4

    黄老师,请问您一下,我按您的步骤设置的登录和注册点击改变尺寸,然后还是原来的状态,没改变尺寸,请问是怎么回事啊?

    zhang_1233周前 (07-27)
  2. #3

    问一下,登录和注册两个点完之后没有办法恢复,什么原因?

    xzj10074个月前 (04-24)
    • login 和register 两个原件都要添加一个放大,另一个缩小。
      你这种情景应该是没有设定另一个。

      doing_6662个月前 (06-11)
  3. #2

    老师请问一下,添加交互的时候是选中哪个元件添呀?还有设置面板状态里状态是不是要添加两次?

    王阿呆°5个月前 (03-20)
    • 添加交互是选择上面的两个【登录】和【注册】tab页,在这两个tab页上添加交互。

      坨坨是我我是坨坨。3个月前 (05-15)
  4. #1

    抢到沙发^_^,求教小楼老师:要是Top部分登录和注册的按钮添加成三个以上,交互效果怎么实现的?

    apingdesign6个月前 (03-02)

购买Axure RP正版授权 终身可用

购买专业版购买团队版