axure动态面板教程怎么做出网页拖动的效果

Axure6.0中在动态面板移动动作中添加了“拖动”,这就给我们模拟iPhone上的列表自由拖动提供了可能。拖动效果的难点是保持列表上部和下部在屏幕可视范围内,超过该范围可自动弹回。
实现步骤:
1.将iPhone框架中的白色区域放置一灰色色块。然后建立一个动态面板,尺寸320*480,命名为“屏幕”,放置在iPhone框架中的屏幕区域。
2.进入动态面板“屏幕”中,再建立一个动态面板,位置(0,-100),尺寸,命名为“列表”。此动态面板的作用是放置列表内容,可视区域上部预留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的动态面板做Tab_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
如何用Axure的动态面板做Tab
||文档简介
将教育做到极致的高端在线教育网站|
总评分0.0|
&&相​信​学​习​产​品​经​理​的​童​鞋​都​知​道​,​A​x​u​r​e​是​一​个​产​品​经​理​必​备​的​专​业​快​速​原​型​设​计​工​具​,​那​么​在​A​x​u​r​e​的​使​用​中​,​怎​么​用​动​态​面​板​做​T​a​b​呢​?​下​面​小​编​就​为​大​家​整​理​了​一​二​,​希​望​对​你​有​帮​助​。
阅读已结束,如果下载本文需要使用0下载券
想免费下载更多文档?
定制HR最喜欢的简历
你可能喜欢君,已阅读到文档的结尾了呢~~
小楼AXURE 图文教程(二十)动态面板拖动效果(函数DRAGX,DRAGY)
扫扫二维码,随身浏览文档
手机或平板扫扫即可继续访问
小楼AXURE 图文教程(二十)动态面板拖动效果(函数DRAGX,DRAGY)
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由:
将文档分享至:
分享完整地址
文档地址:
粘贴到BBS或博客
flash地址:
支持嵌入FLASH地址的网站使用
html代码:
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布,请您等待!
3秒自动关闭窗口

我要回帖

更多关于 axure 动态面板滚动 的文章

 

随机推荐