axure怎么做水平或者垂直移动效果_百度知道
axure怎么做水平或者垂直移动效果
想问一下axure怎么做水平或者垂直移动，我看网上教程里都是像图1里直接选择的，但是我（图2）找不到那个选项。想问一下有什么解决的办法，谢谢！
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
一位有PC端原型设计经验的产品人员，设计移动端产品原型时，遇到的第一个问题可能就是页面拖动的效果了。我们在设计PC端产品时，利用鼠标滚轮进行整个页面的展示，然后到了移动端，利用手指进行拖动，滑动展示整个页面。两种交互方式截然不同。axure制作移动端产品原型时，会遇到很多难题，建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具。当然，axure是完全可以实现移动端交互的，只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标。接下来进入主题，跟大家分享一下【如何利用axure实现移动端页面拖动展示效果】打开axure前，大家不妨先设想一下任务的实现方法：1、移动端显示的页面是固定尺寸的，里面的整体页面可能会超出固定尺寸范围，所以我们需要建立一个动态模板，使其成为固定尺寸的页面，而将超长的整体页面放入其中。2、整体页面必须可以被拖拽，所以整体页面又是一个动态面板3、在我们使用移动端产品，进入页面后，向下拖拽，一般页面会被下拉，而且上方会出现【放开刷新】的提示；同理，我们手指上滑，页面被拖至底部，再不停上滑，页面会被上拉，手指放开后，页面下滑至原位。所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时，自动返回原位的交互这三个实现方法，是我们实现拖动交互的主要思路。接着我们就具体看一下如何在axure中实现目标。1、准备工作：打开axure，新建文档，添加一张iphone的背景素材，顶部添加的wifi和电量的信息，以及顶部导航栏（这些素材百度都可以找到，ios8 UIkit），准备工作完毕2、🔽添加一个动态面板，这个面板相当于我们的屏幕，所以名字可以称为“固定页面”3、🔽动态面板内再添加一个动态面板，这第二个面板相当于我们要展示的内容，需要拖动才能展示整个内容，长度自然也比“固定页面”要长，可以称之为“长内容”4、🔽长内容的面板内添加正文内容，这里我添加了一张图片5、🔽接下来先实现长面板的拖动功能，在固定页面内对长内容面板添加onDrag交互，交互的内容是move，而且move with y,也就是长面只能沿着Y轴拖动6、🔽拖动功能已经实现，我们可以先预览一下已经完成的效果（点击axure操作栏的Preview按钮），尝试着上下拖动图片，结果符合预期，只是拖动后，图片不能复位，那么接下去就要实现复位的功能7、🔽为了实现复位，我们需要在固定页面的顶部和底部添加两个判断用的矩形。顶部的矩形我们暂且称之为“上离开判断区域”，顾名思义，当长内容面板向下拖动，离开“上离开判断区域”，长内容需要move到原始的&0,0&坐标，这个交互我们称之为“下拉复位”。判断区域可以设置为透明，与长内容同宽，高度为象征性的2px8、🔽选择长内容面板，在onDrag动作中添加新的交互“下拉复位”，增加触发条件：当area of widget 长内容 & &is not over & &area of widget 上离开判断区域。那么首先wait 400ms，接着move 长内容，编辑结果 move to X：0 & & Y：0。注意：编辑完下拉复位后，这里有一个很重要的改动，在交互栏中，右击将“下拉复位”的else if条件更改为if。必须这样做，不然下拉复位的动作无法实现。至于这样做的原因，就留给大家思考吧。9、🔽上拉复位的动作完成后，我们还要实现下拉复位。首先我们添加一个判断框，边框与填充均为透明，尺寸为长内容的宽度与象征性的2px，定位于固定页的底部&10、🔽在实现下拉复位的时候，我们给长内容的复原位定为X：0和Y：0，这个很容易理解，长面板向上复位时肯定移动到（0,0）的位置。但现在实现上拉复位，我们需要计算长面板的高度，这是因为长面板拖到底部后，固定页面显示的是长面板的下部分内容。这里可能有些费解，看我的截图也许能帮助理解11、🔽经过上一步的操作，我们得知当整个长内容显示到最底部时，整个长内容的定位为（0，-295），接下去就和实现下拉复位一样了，在交互栏onDrag动作中添加交互“上拉复位”，添加触发条件 &&当area of widget 长内容 & &is not over & &area of widget 下离开判断区域。那么首先wait 400ms，接着move 长内容，编辑结果 move to X：0 & & Y：-295。编辑完上拉复位后，在交互栏中，右击将“上拉复位”的else if条件更改为if。12、🔽所有条件编辑完毕，查看一下交互栏onDrag动作中的所有交互13、🔽大功告成，赶紧运行一下观察效果总结：利用axure实现移动端最基本的上拉与下拉动作是如此复杂，所以我还是建议利用其它原型工具制作移动端原型。然而即便如此，axure还是有其优势，实现静态的页面要比其它原型工具都要便利。这次的功能实现，还有很多能提升的提升的地方，比如复位的时候，我们可以添加动效，使得复位时页面的移动更加平滑。诸如此类的改进，还是留给热爱axure的大家去探索吧。
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。当前位置： >>
axure7.0教程
axure7.0 教程_小楼作品（八）元件函数、窗口函 数、鼠标函数和数字函数的介绍作者: 小楼一夜听春语 分类: Axure7.X 教程 发布时间:
12:00 ?61 浏览数 6 没有评论以下函数来自官方公告，使用方法由楼老师实验得出，分享给大家参考！ 元件函数 Widget.Width：获取元件的宽度，使用方法：通过局部变量获取[[LVAR. Width]]； Widget.Height：获取元件的高度，使用方法：通过局部变量获取[[LVAR. Height]]； Widget.X：获取元件左上顶点 X 坐标值，使用方法：通过局部变量获取[[LVAR. X]]； Widget.Y：获取元件左上顶点 Y 坐标值，使用方法：通过局部变量获取[[LVAR. Y]]； Widget. Left： 获取元件左边界 X 坐标值， 使用方法： 通过局部变量获取[[LVAR. Left]]； Widget. Top： 获取元件顶部边界 Y 坐标值， 使用方法： 通过局部变量获取[[LVAR. Top]]； Widget. Right：获取元件等右边界 X 坐标值，使用方法：通过局部变量获取[[LVAR. Right]]； Widget. Bottom：获取元件底部边界 Y 坐标值，使用方法：通过局部变量获取[[LVAR. Bottom]]； 窗口函数 Window.ScrollX：获取窗口横向滚动的当前坐标值；使用方法：[[Window.ScrollX]] Window.ScrollY：获取窗口纵向滚动的当前坐标值；使用方法：[[Window.ScrollY]] Window.width：获取窗口的宽度，使用方法：[[Window.width]] Window.height：获取窗口的高度，使用方法：[[Window. height]] 鼠标函数 Cursor.X：获取鼠标 X 轴坐标值，使用方法：[[Cursor.X]]；Cursor.Y：获取鼠标 Y 轴坐标值，使用方法：[[Cursor.Y]]。 数字函数 toFixed：指定数字的小数点位数，使用方法：如果 n=1.232，[[n.toFixed(2)]]返回值 1.23； toExponential ： 把对象的值转换为指数计数法， 使用方法： toExponential (参数)]]； [[n. toPrecision： 把数字格式化为指定的长度：如果 n=1, [[n. toPrecision (6)]]返回值 1.00000。 更多 Axure7 函数教程请访问博客：诉客 ? 产品经理的心声
Axure RP Pro 7.0 操作手册-陈和萍_互联网_IT/计算机_专业资料。Axure RP ...Axure_RP_Pro_5_中文教程... 35页 免费
Axure_RP操作手册 41页 免费
...视频教程,陪学网PEXUE全套教学,在线学习Axure课程,《Axure RP 7.0入门宝典》视频下载... Axure RP当前互联网应用面最为广泛和成熟的便捷高效原型制作工具,应用于产品...AxureRP7.0标准教程目录_计算机硬件及网络_IT/计算机_专业资料。AxureRP7.0 标准教程目录第一部分基础篇基础教程 Part1(概述) 1-01 PC 机的安装、汉化及自定义...Axure_RP_Pro_7.0_操作手册_计算机硬件及网络_IT/计算机_专业资料。Axure RP ...Axure_RP_Pro案例教程 31页 2下载券
Axure RP 7.0快捷键 Axu... 1页 5...axure7.0教程_小楼作品(二)中继器的使用(2) - 在上一节教程 axure7.0 教程_小楼作品(一)中继器的使用(1)中我们初步讲解了,如何 使用中继器的功能之一,在 ...Axure-RP-Pro-7.0-操作手册 - AXURERP-PRO 7.0 操作 运行AxureRP 1.1. 认识AxureRP-Pro7.0操作界面 1 下图是Axure RP 环境...Axure7.0图片裁剪功能 - Axure7.0 图片裁剪功能 1、 拖图片控件到画布中; 2、 选择本地图片; 3、 在图片上方,右键,选择图片裁剪功能(Slice Image…)。 4...AXURE 7.0 页面和部件事件(Events) 解释说明书(Specifications) 1、事件列表 Axure RP 7.0 的页面事件列表如图 1 所示: 图 1 Axure RP 7.0 的页面事件列表 ...Axure7.0 repeater中继器的使用教程 - Repeater 中继器设置数据源、图片等功能介绍... Axure7.0 repeater中继器的使用教程_计算机软件及应用_IT/计算机_专业资料。Repeat...Axure RP 7.0弹窗定位,弹出窗口定位 - 前些天刚接触到了 Axure RP 这款原型设计工具,百度了很久,网上免费的只有一些简单基 础的入门教程。英文的看不懂,那么...
All rights reserved Powered by
www.tceic.com
copyright &copyright 。文档资料库内容来自网络，如有侵犯请联系客服。[转载]Axure&6.5&DragX、DragY函数探密
6.5增加好几个函数。在上一篇教程里我曾分析了TotalDragX和TotalDragY的意义和应用。今天我们要分析DragX、DragY是什么意义。
温故而知新。上一篇我们说到TotalDragX、Y指的是一次拖曳面板时从拖曳开始到停止拖曳，面板在X和Y方向移动的距离。左和上为负值，右和下为正值。虽然在拖曳过程中这个函数的值是动态的，但一般是在拖曳停止时的值才有价值，它实际上表达了一次拖曳过程中面板往X和Y方向移动的幅度。我们可以将该值代入条件判断以界定ondragdrop的事件。
那么，有没有在面板移动过程中，控制其它面板一起移动的函数呢？记得去年我曾要做这样的效果：“拖曳A面板时，B面板反向移动且速率等于A面板移动速率的一半。”当时还在Webppd.com上求助，最后只能用前端代码实现，麻烦得抓狂。而Axure6.5的DragX、Y就是解决这个问题的函数。
拖曳面板的过程中，速度是一直在变化的。读过高数的理工科生一定对导数的概念不陌生。比如任意极短的时间&t0&水平移动了&x0&，那么在这一瞬间X方向的速度就是&x0/&t0,虽然从字面上看，Dragx、Dragy真看不出与速度有关。但它的确就是面板在任意时间点上在X和Y方向的瞬间移动距离。理解为瞬间速度即可。
有了这2个函数，我们就可以应用到ondrag事件中，指定其它面板一起移动，并且可以控制其它面板移动的速率和方向。附件例子中，对面板A添加ondrag事件，指定面板B移动了dragx和dragy。大家会发现，拖曳面板A时面板B会一起移动，任何时刻速度都与面板A一致。其效果就等同于onmove里的跟随移动drap
with this。
有人要问了，既然我们可用onmove来实现面板跟随移动的效果，那这两函数岂不多余？请在上例的ondrag事件[[dragx]]和[[dragy]]前面加负号看看。会发现面板B会随面板A反向移动。实际应用场景中更多可能只要用到其中一个函数。比如移动垂直的内容列表时滚动条在Y轴的反向移动效果。
如果上例中函数值再乘以二分这一呢？[[-1/2dragx]]和[[-1/2dragy]]，哈哈，这不就实现了我去年苦苦寻觅的效果了吗？大家自已试试吧。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&by:老胡&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
原型下载：
DragY函数探密.rar
RP文件下载：
Dragy函数探密rp.rar
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Axure drag元件功能失灵了，怎么办？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。2被浏览170分享邀请回答赞同 添加评论分享收藏感谢收起 上传我的文档
 上传文档
 下载
 收藏
粉丝量：36
该文档贡献者很忙，什么也没留下。
 下载此文档
小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)
下载积分：499
内容提示：小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)
文档格式：DOCX|
浏览次数：290|
上传日期： 22:01:57|
文档星级：
全文阅读已结束，如果下载本文需要使用
 499 积分
下载此文档
该用户还上传了这些文档
小楼axure 图文教程(二十)动态面板拖动效果(函数Dra
关注微信公众号