• 周星驰亲自见鱼 《美人鱼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教程 小楼一夜听春语 1020℃ 0评论

    腾讯分分彩计划 www.kr9ta.cn 这一篇Axure RP 8的教程,主要给大家讲一下Axure RP中和浏览器窗口相关系统变量的使用。

    主要会用到:

    • Window.scrollY:浏览器Y轴滚动距离
    • Window.height:浏览器窗口高度。

    当我把这个案例做完之后,我就忍不住出来浪了。

    大家看看效果,注意右下角的返回顶部按钮!

    虽然原型很粗糙(页面内容用一个矩形代替了),但是交互效果还是很有趣的。

    用有趣的原型帮助大家学习,是我一贯坚持的,挺不容易...挺起来不容易...坚持挺着更不容易...

    所以,如果觉得教程有趣,学爽了,就多叫几个女同学来吧!

    接下来,老套路,思路分析。

    问:用户做了什么?

    答:用户拉动了滚动条。

    问:给用户什么反???

    答:

    • 将返回顶部按钮固定在窗口的右下方,并且窗口发生滚动时,通过已滚动距离与可滚动的总距离的比例,控制返回顶部蓝色区域的高度,也就是让蓝色区域的最大高度乘以计算出来的比例。
    • 点击返回顶部按钮时,将页面滚动回顶部。

    提示:可滚动的总距离=页面总长减去窗口的高度

    好了,思路有了之后,我们进行元件的准备。

    1、页面内容用一个矩形代替,这里我用的高度为“2000”,宽度为“1200”。

    2、放入第2个矩形,作为返回顶部按钮(蓝色部分),设置好尺寸(这里是80*80)、边框颜色、填充颜色、文字与文字颜色。

    3、放入第3个矩形,覆盖在蓝色矩形上层,作为返回顶部按钮(白色部分),设置好尺寸(这里是80*80)、边框颜色、文字与文字颜色。

    4、将第3个矩形点中,然后点右键选择【转换为动态面板】,并命名为“White”,最后将动态面板“White”覆盖在蓝色矩形上方。

    为什么转换为动态面板呢?因为动态面板改变高度能够让白色矩形“White”只显示由上至下的一部分。

    大家可以手动调整高度试试看,是不是和目标效果一样?

    5、在概要中,按着Ctrl键将蓝色矩形和包含白色矩形的动态面板一起选中,然后再次在选中的元件上方点右键,选择【转换为动态面板】。

    为什么再次转换呢?因为要把它们统一固定在浏览器窗口的右下方。

    6、在页面的顶部放入一个热区元件,位置X轴位置随意,Y轴为0,然后命名为“Location”。

    这个元件用于点击返回顶部按钮时返回顶部的定位。

    完成元件准备之后,接下来,我们完成给用户的反馈,也就是交互。

    1、将返回顶部按钮固定在浏览器右下方,在最外层动态面板上点击鼠标右键,选择【固定到浏览器】(也可以在属性面板中设置),然后,勾选【固定到浏览器窗口】,选择“右”并设置边距为“20”,选择“下”并设置边距“20”。

    2、点击概要中的页面名称,切换到页面的属性面板,添加【窗口滚动时】的交互,设置动作为【设置尺寸】于动态面板“White”(注意不是最外层的动态面板),宽度保持“80”不变,高度设置为“[[80-Window.scrollY/(2000-window.height)*80]]”,其他设置保持默认。

    提示:关于高度的计算转换为语言就是“按钮高度-已滚动距离/可滚动总距离*按钮高度”。

    3、点中最外层动态面板,添加【鼠标单击时】的交互,设置动作为【滚动到元件<锚链接>】,目标元件选择“Location”,设置中保持默认的【仅垂直滚动】不变,动画设置为【线性】,时长“500”毫秒。

    到这里,我们就完成了本篇教程的案例。

    整个一遍做完,学爽了没?

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

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

    源文件下载:【点击下载

     


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

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

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


    转载请注明:腾讯分分彩计划 » 带有动态效果的返回顶部按钮

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

    表情

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

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    (11)个小伙伴在吐槽
    1. 一步步做出来了,感谢小楼老师
      柯布2018-03-02 11:26 回复
    2. 请问 你的说明中的橘黄色的线条 拿什么做出来的
      牛逼2018-03-06 16:53 回复
      • 小楼一夜听春语
        axure
        小楼一夜听春语2018-03-07 09:53 回复
        • 我怎么没有这个橘黄色的线条,需要下载原件库吗
          牛逼2018-03-08 10:12 回复
          • 小楼一夜听春语
            去学习入门手册
            小楼一夜听春语2018-03-08 11:20 回复
            • 好的 谢谢啦
              牛逼2018-03-08 13:35
        • 小楼老师可不可以出一个关于编辑条件里面的每个??槎际怯美锤陕锏慕坛?div class="c-meta">熊猫2018-03-28 11:06 回复
  • 设置white的高度和宽度时的 窗口滚动时哪个元件的 为什么我的只有滚动时 没有窗口滚动时
    米粒儿2018-03-13 10:06 回复
    • 小楼一夜听春语
      页面才有窗口滚动时
      小楼一夜听春语2018-03-14 08:19 回复
  • 小楼老师,在“设置尺寸”时,把锚点改为“底层”、“左下角”或者“右下角”,做出的效果有问题。 上面一层的矩形在变小时,图形中的字会跟着下移。(若锚点选择“顶层”、“左上角”或者“右上角”,做出来没有问题。)
    追风2018-03-16 16:49 回复
  • 小楼老师,我按照您的步骤做了,只不过返回顶部按钮设置成45*45,最后出来的效果,滚动鼠标到底部的时候并没有完全被覆盖,还剩下大概五分之一,也对比过您的文件,都没问题,不知道是哪里出错了.....
    Panther2018-03-19 14:08 回复