• 辣评丨沃尔玛禁用支付宝,伤害用户选择权 2018-03-27
  • 燃煤机组烟气超低排放主要改造技术方案探析 2018-03-27
  • 黑暗料理!陈乔恩耿直自黑厨艺:妈妈我不敢吃陈乔恩厨艺自黑 2018-03-27
  • 指导案例9号:XX仓库资格招标项目投诉案 2018-03-27
  • 铁警李华“一个人的春运”不寂寞 2018-03-27
  • 建德持证残疾人到杭州可免费乘公交坐地铁 建德新闻网 2018-03-27
  • 浙江金东万亩桃花迎最佳观赏期 漫山遍野如粉色云海 2018-03-27
  • “福彩号”珠江夜游游船开船 边赏景边购彩 2018-03-27
  • 中国农产品开拓中东市场 - 贸易促进 - 一带一路发展频道 2018-03-27
  • 今年中新天津生态城将举办首届国际旅游节 2018-03-27
  • 农业部:延长土地承包时间 2018-03-27
  • 大数据、大融合新媒体传播的机遇与挑战(一) 2018-03-27
  • 蹊跷!毒贩家中为啥藏着胡椒喷剂 2018-03-27
  • 巴中特警野外拉练 锤炼技能保平安 2018-03-27
  • 湖南:确保今年“基本消除义务教育超大班额” 2018-03-27
  • 带有动态效果的返回顶部按钮

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

    北京PK10 www.musicv.com.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 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


    转载请注明:北京PK10 » 带有动态效果的返回顶部按钮

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