带有动态效果的返回顶部按钮

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

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


转载请注明:Axure原创教程网 » 带有动态效果的返回顶部按钮

喜欢 (30)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
      • 小楼老师可不可以出一个关于编辑条件里面的每个模块都是用来干嘛的教程
        熊猫2018-03-28 11:06 回复
  3. 设置white的高度和宽度时的 窗口滚动时哪个元件的 为什么我的只有滚动时 没有窗口滚动时
    米粒儿2018-03-13 10:06 回复
    • 小楼一夜听春语
      页面才有窗口滚动时
      小楼一夜听春语2018-03-14 08:19 回复
  4. 小楼老师,在“设置尺寸”时,把锚点改为“底层”、“左下角”或者“右下角”,做出的效果有问题。 上面一层的矩形在变小时,图形中的字会跟着下移。(若锚点选择“顶层”、“左上角”或者“右上角”,做出来没有问题。)
    追风2018-03-16 16:49 回复
  5. 小楼老师,我按照您的步骤做了,只不过返回顶部按钮设置成45*45,最后出来的效果,滚动鼠标到底部的时候并没有完全被覆盖,还剩下大概五分之一,也对比过您的文件,都没问题,不知道是哪里出错了.....
    Panther2018-03-19 14:08 回复