使用Axure模拟高仿真iPhone交互动作(4)――列表拖动
2013-04-01 13:40
375 查看
列表拖动 Axure6.0中在动态面板移动动作中添加了“拖动”,这就给我们模拟iPhone上的列表自由拖动提供了可能。拖动效果的难点是保持列表上部和下部在屏幕可视范围内,超过该范围可自动弹回。实现步骤:1.将iPhone框架中的白色区域放置一灰色色块。然后建立一个动态面板,尺寸320*480,命名为“屏幕”,放置在iPhone框架中的屏幕区域。
2.进入动态面板“屏幕”中,再建立一个动态面板,位置(0,-100),尺寸1000*480,命名为“列表”。此动态面板的作用是放置列表内容,可视区域上部预留100px高度是为了放置“下拉刷新”等操作,若无此类操作可不预留这段范围。
3.进入动态面板“列表”中,在最上部放置一个320*100的灰色色块(与iPhone屏幕色块颜色保持一致),写上“下拉刷新”,代表下拉刷新的区域。下面放置白色色块及列表。
4.为动态面板“列表”添加拖动时(OnDrag)的交互动作:拖动时沿y轴运动。
现在列表已经可以拖动了,但是上下没有范围限制。下面我们要给列表加上上下超过范围自动弹回的效果。5.实现这个效果主要基于部件范围条件,我们先绘制两个图像热区(不会在界面中显示,方便操作,为方便观察,示意图中用白色色块代替)作为范围限制,分别命名为“up”和“down”。动作逻辑为:如果拖动结束后动态面板“列表”上边沿不在“up”范围内,则自动移回初始位置;若拖动结束后下边界不在“down”范围内,则自动移至列表下边沿与屏幕下边沿对齐。“up”和“down”的放置位置如下:“up”刚好与“下拉刷新”上边沿相交1px或2px,“down”放置在屏幕下边沿下方。
6.给动态面板“列表”添加结束拖放动态面板时(OnDragDrop)的交互动作,使用条件:如果“列表”不在“up”的范围内。
若满足此条件,则动态面板“列表”自动移回初始位置
7.之后再添加一个用例,使用条件:如果“列表”不在“down”的范围内。
若满足此条件,则动态面板“列表”自动移至下边沿与屏幕下边沿对齐。
动态面板“列表”的最终动作设置结果如下:
至此,列表拖动效果制作完成。注,因为是模拟手机上的动作交互,拖动时鼠标最好不要超出屏幕范围,否则会出现无法控制等问题。
相关文章推荐
- 使用Axure模拟高仿真iPhone交互动作(6)――收起展开
- 使用Axure模拟高仿真iPhone交互动作(5)――图片浏览
- 使用Axure模拟高仿真iPhone交互动作(5)——图片浏览
- 使用Axure模拟高仿真iPhone交互动作(3)――出现切换
- 使用Axure模拟高仿真iPhone交互动作(2)――覆盖切换
- 使用Axure模拟高仿真iPhone交互动作(1)――推动切换
- 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
- 使用jquery-sortable交互工具和acts_as_list rubygem实现页面拖动排序
- STM32在线仿真出现是循环,使用mcuisp下载程序却可以运行,JTAG下载程序可以下载成功,却没有任何动作!
- iPhone开发笔记(17)使用EGOTableViewPullRefresh实现列表的下拉刷新功能
- JS与OC交互(iPhone项目)中JavaScriptCore.framework的使用
- 10 Three.js使用orbit controls插件(轨道控制)来控制模型交互动作
- Iphone文件处理——使用属性列表(plist)
- Iphone文件处理——使用属性列表(plist)
- 一个视频播放列表demo,视频播放使用的ijkplayer,正在播放视频拖动到不可见区域小窗口播放,可全屏切换
- Cocos Creator中使用动作列表(官方文档摘录)
- jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
- jQuery列表拖动排列-jquery list dragsort插件参数和使用方法
- 【iPhone代码片段之二】使用类别扩展UIColor,支持生成随机颜色
- MATLAB中使用DSPBuilder仿真时的设置