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

axure商城

这节课教大家最基础的划屏+回弹效果制作,之后如果有时间还会继续写划屏相关的其他内容。

『点击查看效果』

■ 静态元素结构

 

QQ截图20160104015543

将需要制作划屏的文章内容转化为动态面板。

再将文章内容再转化为动态面板,并将该面板调整为显示范围(手机屏幕大小)的尺寸。

QQ截图20160104015733

将调整好的动态面板放到手机屏幕区域内,如上图效果。

■ 交互分析

我们期望的效果是:

1、可以垂直拖动文章内容。

2、拖动最多可超出上下边界半屏,但会自动回弹到上下边界。

■ 垂直拖动&拖动限制

拖动显示范围面板时,使文章内容被拖动。

所以选中『显示范围』面板,选择『拖动时』事件,选择『移动』,移动的元件是文章内容。

移动中要选择『垂直拖动』,因为外面只希望文章内容垂直拖动,不希望左右也一起被拖动。

EFEA1FBE-7907-4762-AC94-957CD95D74B5

我们希望可以上下各可以最多拖出去半屏,所以需要增加边界限制。Axure8版本中可以直接设置边界,Axure7需要用条件来限制。

Axure8的方法

顶部<=[[This.height/2]]、底部>[[This.height/2]],如上图。

Axure7的方法

增加条件,符合条件的时候才可以拖动:

898BB0F7-1C96-4567-BC5C-737984659776

【注释】NeiRong=文章内容动态面板,This是当前元件。

在做的时候,不要忘记点击旁边的fx按钮,增加局部变量,如下图。这样变量才可以生效的哦。

21538CF3-9A5A-4D54-A53F-92D25651642D

[[NeiRong.y]]<=[[This.Height/2]]  //向下拖动达到半屏时,内容的Y坐标,如下图。A

[[NeiRong.y]]>=[[This.height/2-NeiRong.height]]  //向上拖动达到半屏时,内容Y的坐标,如下图。

A

这样划屏就做好了,并且上下都可以额外拖出去半个屏幕,允许拖出去的额外半屏是为了回弹准备的。

■ 回弹

A

回弹是根据文章内容的拖动结束时的Y坐标来判断是否超过了文章的最上面或最下面的边界。

如果文章内容的Y>0,就将文章内容移回0,0点。要选择动画才会有弹回去的过程哦,我比较喜欢缓慢退出这个动画。

如果文章内容的Y坐标<显示范围的高度-内容的高度,那么就将文章内容的Y坐标设置为显示范围的高度-内容的高度。

我觉得大家的疑点应该在于『显示范围的高度-内容的高度』这个东西,不知道为什么要这样写。

其实这是一个数学题……

A

『显示范围-内容高度』得到的是还需要移动多少像素才可以让剩下的最后一屏(1屏高度=显示范围的高度)内容正好放在显示范围中。

由于Axure的左上为0,0点,所以面板向上移动的时候,Y坐标(Y坐标是以元件左上点为准的)会变成负数。所以我们需要用『显示范围-内容高度』,而不是『内容高度-显示范围』。

 

如果哪里不明白,可以在下面留言或加到Axure中文网2群(简称中2群→273547192)来找我。提问之前一定要过脑子思考认真学习哦,我很有耐心去教,但是我不接受任何伸手党的无脑提问。

axure商城

相关推荐

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

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