• “北京禁毒志愿者禁毒宣传月” 2018-03-28
  • 按揭:我和她的羞涩房事 2018-03-28
  • 让“高质量”成为“3·15”新坐标 2018-03-28
  • 歼20与苏57谁强谁弱? 2018-03-28
  • 269元!Yeelight语音助手开卖:小冰+小爱双AI系统 2018-03-28
  • 东阳提高新办退休人员养老金预发标准 2018-03-28
  • 盐田区安监局开展全国“两会”期间安全生产专项检查 2018-03-28
  • 《尾牌Q1》今日上线 童苡萱大秀精分演技饰两角 2018-03-28
  • 宠妻100分:军少,别乱撩全文免费阅读 2018-03-28
  • 教育部部署中小学招生:2020年前取消特长生招生 2018-03-28
  • 历史上最红颜祸水的女人,三次王后,七次嫁人,还有九个男人为她而死 2018-03-28
  • 《溺宠小甜妃:妖娆召唤师》TXT,是古代文学类文学作品 2018-03-28
  • 组图:刘强东晒中学时期照片 青涩稚嫩满满少年气 2018-03-28
  • 两大出版机构签约 “强强联手”助推中国文化走向世界 2018-03-28
  • 世界杯第二阶段售票首日售出超35万张门票 2018-03-28
  • 做一个动感切换的登录注册面板

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

    分分彩是如何害人的 www.dfc853.club 好久没有做了,今天做一次!

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


    转载请注明:分分彩是如何害人的 » 做一个动感切换的登录注册面板

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

    表情

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

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    (11)个小伙伴在吐槽
    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 回复