Axure官方正版
快速原型设计工具

手机垂直划屏效果从零学起(二)

大家嚎,断更很久的我又回来了发教程,这次要教大家的是手机垂直划屏时旁边的滚动条的制作。

效果图

3

通过效果图我们可知我们的期望效果如下:

1、拖动开始时显示滚动条

2、拖动结束时隐藏滚动条

3、滚动条长度和文章总高度是成比例的

4、拖动到上边界时滚动条会成比例的缩短

5、拖动结束时滚动条会变回原来的高度

变量名说明

下文中说的main=显示范围层,text=内容层,bar=滚动条。

建议学习之前先看下之前的那篇教程:手机垂直划屏效果从零学起(一)

页面载入时

载入时要让滚动条的高度根据比例变为指定高度

[[main.height/text.height*main.height]]

main拖动开始时

显示bar

main拖动结束时

隐藏bar

拖动到上下边界结束时将bar还原到原来的高度,上下边界的锚点不同。

拖动到上边界时要以顶部为锚点,拖动到下边界时要以顶部为锚点。

QQ截图20160210215903

拖动时对内容和bar进行拖动范围上下限设置

QQ截图20160210220312

【重点:要用心理解,不理解自己画图理解。】

QQ截图20160210220317

向下拖拽到上边界的情况,判定条件:[[text.y]]>0

此时,需要将bar的高度设置为[[main.height/text.height*main.height*(1-(text.y/(main.height*0.5)))]]

分解:

main.height/text.height=显示范围和内容页的比例

比例*main.height=滚动条标准高度

main.height*0.5=半屏高度

text.y=拖动超出上边界值

1-拖动超出上边界值/半屏高度=滚动条高度系数

滚动条标准高度*滚动条高度系数=此时滚动条的高度

源文件&课后练习

→_→我知道你们一定又在要源文件了,介于这次教程需要脑力理解的内容很多,我就不出谜题给源文件网址了,因为有源文件不动脑子也是学不会的。

http://pan.baidu.com/s/1XmWjG

另外,我只做了上边界的拖动回弹滚动条效果,下边界的没做哟,想印证下自己是否真的学会了吗?把下边界的交互自己做了吧~

转载请注明出处:Axure中文网 » 手机垂直划屏效果从零学起(二)

评论 4

评论前必须登录!

 

  1. #3

    向下的函数是解决了,但是效果有点奇怪, 并没有贴着底部能问下是为什么嘛

    lz琛7个月前 (10-11)
  2. #2

    小编好喜欢装。。。

    john8710109个月前 (07-23)
  3. #1

    这个是axrue8.0的,请问有7.0的教程吗[害羞]

    闫泽1年前 (2016-04-19)

购买Axure RP正版授权 终身可用

购买专业版购买团队版