• 周星驰亲自见鱼 《美人鱼2》成终极考题 2018-03-27
  • 荣胜现金投注 2018-03-27
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2018-03-27
  • ★风骚重生传最新章节 2018-03-27
  • 塔城至伊宁航线正式开通 2018-03-27
  • 早春二月百花开 京郊自驾踏青要有辆SUV 2018-03-27
  • 人民观影团:《英伦对决》看不一样的成龙大哥 2018-03-27
  • 天津市今春植树造林14万亩完成全年任务的40% 2018-03-27
  • 学习贯彻区两会精神 吹响新征程号角 2018-03-27
  • 祝新运:从“潘冬子”到导演 2018-03-27
  • 【纪检人·手记】生日当天,我在脱贫攻坚一线督战到深夜 2018-03-27
  • 居然之家助力香河家居业新发展 2018-03-27
  • 06世界杯进球集锦高清 2018-03-27
  • 山东蓬莱组织残疾人运动员开展集训 2018-03-27
  • 关爱大姨妈 专家教你科学鉴别卫生巾优劣 2018-03-27
  • 做一个动感切换的登录注册面板

    AxureRP8.0教程 小楼一夜听春语 3292℃ 0评论

    腾讯分分彩计划 www.kr9ta.cn 好久没有做了,今天做一次!

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


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

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

    表情

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

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    (12)个小伙伴在吐槽
    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 回复
      • 同样问题正在找
        2018-03-28 00:32 回复
    7. 预览时注册登录元件会互相挤,然后超出界面范围,请问是问么原因?
      学习者2018-03-27 10:35 回复
    8. 牛掰
      parker2018-04-02 13:16 回复
    9. 左侧登陆是放大的尺寸,滑动到注册没有问题,再切回登陆,滑动就会有留空白,是咋回事呀?就是登陆的框框追着注册的框框的柑橘
      xingchen2018-04-03 18:52 回复
    10. 做注册的时候我备份了页面,然后用的备份页面做的修改,结果调半天都没有调出效果来,在快要下班了那一刻,我突然注意到执行页面标题是“注册”,不是副本 ? ? ? 被自己蠢哭!
      2015767602@qq.com2018-06-07 17:22 回复