• “北京禁毒志愿者禁毒宣传月” 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
  • 带有动态效果的返回顶部按钮

    分分彩是如何害人的 www.dfc853.club 这一篇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 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


    转载请注明:分分彩是如何害人的 » 带有动态效果的返回顶部按钮

    喜欢 (26)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 回复