实现步骤:

1.拖放两个元件进画布,一个图片元件,里面放置一张手机外形壳图片,并将其命名为【手机壳】,一个是动态面板,放在【手机壳上】,并将其命名为【屏幕】

iOS uiscrollview只有侧滑手势OC_菜单

2.拖放摆放好屏幕State1状态的内容:屏幕主要由三部分构成

(1)一个动态面板,命名为【主页】,置于顶层。(大小等于【屏幕】大小,放在【屏幕】正中间) 

(2)一个元件组合,命名为【菜单】,置于中层;(这个组合主要由一些水平线和一些文本标签组成,组合高度等于【屏幕】高度,放在【屏幕】的左侧)

iOS uiscrollview只有侧滑手势OC_侧滑栏_02

(3)一条垂直线元件,命名为【分界线】,置于底层。(高度等于【屏幕】高度,放在【屏幕】正中间) 

iOS uiscrollview只有侧滑手势OC_用例_03

3.摆放好【主页】 State1状态内容:拖放一个大的灰色矩形,一个白色矩形外加一个写着“主页”的文本标签

iOS uiscrollview只有侧滑手势OC_菜单_04

4.为【主页】添加载入时用例 

设置OnLoadVariable变量的值为0

iOS uiscrollview只有侧滑手势OC_用例_05

5. 为【主页】添加拖动时用例:

用例中添加一个动作,即移动当前元件,移动方式为水平拖动,无动画,左侧边界小于等于【菜单】的宽度,大于等于0。

 

iOS uiscrollview只有侧滑手势OC_菜单_06

iOS uiscrollview只有侧滑手势OC_用例_07

6. 为【主页】添加拖动结束时用例:

总共添加4个用例,分别对应向右滑动【主页】未接触【分界线】、向右滑动【主页】接触【分界线】、向左滑动【主页】未接触【分界线】、向左滑动【主页】接触【分界线】4种情况

iOS uiscrollview只有侧滑手势OC_交互设计_08

(1)向右滑动“主页”未接触“分界线”

条件:当前元件未接触“分界线”且OnLoadVariable的值为0

动作:i.相对移动“主页”,x轴移动距离为:“菜单”x轴坐标+“菜单”宽度-“主页”x轴坐标,y轴移动距离为:0,动画为线性,时                      间为100毫秒。

          ii.设置OnLoadVariable的值为1

iOS uiscrollview只有侧滑手势OC_用例_09

iOS uiscrollview只有侧滑手势OC_侧滑栏_10

iOS uiscrollview只有侧滑手势OC_侧滑栏_11

(2)向右滑动“主页”接触“分界线”

条件:当前元件接触“分界线”且OnLoadVariable的值为0

动作:相对移动“主页”回到拖动前位置,动画为线性,时间为100毫秒。

iOS uiscrollview只有侧滑手势OC_Axure_12

iOS uiscrollview只有侧滑手势OC_菜单_13

(3)向左滑动“主页”未接触“分界线”

条件:当前元件未接触“分界线”且OnLoadVariable的值为1

动作:相对移动“主页”回到拖动前位置,动画为线性,时间为100毫秒。

iOS uiscrollview只有侧滑手势OC_交互设计_14

 

iOS uiscrollview只有侧滑手势OC_菜单_15

 (4)向左滑动“主页”接触“分界线”

条件:当前元件接触“分界线”且OnLoadVariable的值为1

动作:i.相对移动“主页”,x轴移动距离为:“菜单”x轴坐标-“主页”x轴坐标,y轴移动距离为:0,动画为线性,时间为100毫秒。

          ii.设置OnLoadVariable的值为0

iOS uiscrollview只有侧滑手势OC_用例_16

iOS uiscrollview只有侧滑手势OC_Axure_17

iOS uiscrollview只有侧滑手势OC_侧滑栏_18

 7.完成,点击浏览一下