• 湖北27条高速路段、近百个收费站因大雾临时封闭 东楚网 2018-03-28
  • 毛阿敏老公把中融信托卖了 中植集团这样回应 2018-03-28
  • 【“一带一路”福建篇】千年“海丝”梦 八闽山水长 2018-03-28
  • 2018年精神文明建设工作简报第2期 2018-03-28
  • 回到三国的无敌特种兵最新章节 2018-03-28
  • 俄罗斯购物中心起火 至少37人死亡69人失踪 2018-03-28
  • 莱州建设文峰路街道学校 改造地下综合管廊 2018-03-28
  • 完善医疗器械法规规章的相关建议 2018-03-28
  • 2018湖北省高考体育专业素质测试文件发布 2018-03-28
  • 首届全国禁毒微视频摄影大赛 2018-03-28
  • 兴文县2014年度财政预算执行和其他财政收支情况审计结果公告 2018-03-28
  • 新疆裕民县江格斯乡南村干部为村民争实惠 2018-03-28
  • 孙宏斌再次逼宫,二次动作直击监管层 2018-03-28
  • 这份权威的“旅行医学指南”,关键时刻能救命 2018-03-28
  • 2018江苏公务员招录笔试:平均38.5人竞争一个岗位——中国新闻网江苏 2018-03-28
  • 做一个动感切换的登录注册面板

    腾讯分分彩4星漏洞 www.mfshiliao.com 好久没有做了,今天做一次!

    使用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 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


    转载请注明:腾讯分分彩4星漏洞 » 做一个动感切换的登录注册面板

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

    表情

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

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    (7)个小伙伴在吐槽
    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 回复
    6. 小楼老师您好,我设置好btn交互效果后,在切换两个btn时,登录注册的圆角会被拉伸和挤压变形,请问如何解决?我看您的案例上的两个圆角并没有变形。
      CYifei2018-03-13 11:54 回复