手机垂直划屏效果从零学起（一）

　　■ 静态元素结构

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

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

　　将调整好的动态面板放到手机屏幕区域内

　　■ 交互分析

　　我们期望的效果是：

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

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

　　■ 垂直拖动&拖动限制

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

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

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

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

　　Axure8的方法

　　顶部<=[[This.height/2]]、底部>[[This.height/2]]。Axure7的方法

　　增加条件，符合条件的时候才可以拖动：

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

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

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

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

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

　　■ 回弹

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

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

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

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

　　其实这是一个数学题……

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

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

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。