做一个动感切换的登录注册面板

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

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

效果图:

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

接下来,例行公事。

先做分析,再实现步骤。

问:用户做了什么?

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

问:给用户什么反馈?

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

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

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

一、准备元件

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

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

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

二、添加交互

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

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

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

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

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

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

源文件下载:【点击下载


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 做一个动感切换的登录注册面板

喜欢 (25)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 😳 学习了
    娃哈哈2018-01-31 14:14 回复
  2. “两个动画保持方向一致”的意思是上面两个原件和下面动态面板的两个状态动的方向要一致。 笔记。:lol:
    宝哥哥2018-02-01 16:11 回复
  3. 楼主,您好,我按照上面的步骤试一下,预览切换到注册页面时,LoginTag的页面跑到RegisterTag页面底下去了。可能是什么地方的原因呢?
    愿望漂流瓶2018-02-08 14:23 回复
    • 看看 锚点设置的是否正确
      bobowang5002018-02-09 02:46 回复
  4. 调整好啦。
    愿望漂流瓶2018-02-08 14:59 回复
  5. 我用的是动态面板做了两个效果,能够实现注册和登录标签随着鼠标拖动的节奏和方向前后滑动,同时下方的界面也能够跟随其速度及方向滑动。停走自如(跟着鼠标走,并做了一个滑动超过半屏自动吸附的功能,不过实现的不是很理想);另外一种效果是在拖动时,惯性的速率让元件到达指定位置(一滑屏元件就移动到指定位置)。因为我觉得整个原型的初衷还是要有一个拖动的感觉,在移动客户端表现会更合实际要求;我也是菜鸟一只,说错了的话,老师请包涵。
    bobowang5002018-02-09 02:44 回复