快好知 kuaihz

Axure教程:上下翻动效果制作步骤详解

文章主要跟大家介绍,如何利用Axure制作上下翻动效果,一起来看看~

主要是用Axure做手机APP,内容翻动的效果如何实现:

内容在显示区域滚动;

内容面板没有接触到顶部时,让内容面板移动至顶部;

内容面板接触到顶部,没有接触到底部时,把内容面板的底部定位到底部元件位置。

 

1. 元件布局

将顶部和底部矩形、动态面板显示区域先放置好,设置相同的宽度,高度自定,无缝衔接在一起。

以顶部为例,从元件库中选择矩形1拉入画板中,双击矩形编写文字顶部,之后调整顶部的宽和高,如果宽和高固定了,你点击上图步骤4中箭头所指位置的蓝色小点,去除锁定即可修改,最后在右下角页面中双击矩形命名为顶部,同理可得底部。

显示区域是动态面板同样是从元件库中选中拉入画板中,命名方式有两种,1种在面板选中的情况下,直接在右上角3的区域填写;第2种则是在右下角页面处双击动态面板弹框中命名,如右下角的3区域。

显示区域除了长宽要设置,还有最左上端的坐标,要承接顶部最坐下端坐标,X轴为0,Y轴为顶部高。

内容区域也是动态面板,但是,生成方式跟显示面板不同,敲黑板这部分是关键,初学看了其他的教程摸索很久才弄懂。内容区域是在显示面板的state1里面实现的,双击state1进入,然后从元件库拉入新的画板中。设置内容画板宽度同其他元件,高度比显示区域大。图中忘了截图内容区域命名后的,别忘了要命名。

2. 填充内容面板

双击内容面板中的state1,填充一些元素,方便查看滚动效果,记得操作完要回到首页。

3. 添加事件

1)让内容在显示区域滚动

2)内容面板没有接触到顶部时,让内容面板移动至顶部;意思是你拉下来页面,让内容面板上部没有接触到顶部时,会自动回到顶部。

先编辑条件,内容面板未接触顶部时;

内容面板移动到顶部,即绝对位置。

3)内容面板接触到顶部,没有接触到底部时,把内容面板的底部定位到底部元件位置。

先编辑条件,内容面板接触到顶部,但未接触底部。

内容面板移动到底部,移动距离=显示面板高度-内容面板高度(为负数)。

确认之后预览即可。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:翻动  翻动词条  详解  详解词条  步骤  步骤词条  上下  上下词条  效果  效果词条  
原型

 原型设计:APP下导航如何通过A...

下导航是APP原型设计中常见的功能,如何快速高效的通过Axure画出来呢?网上有不少文章讲过如何画下导航,要么方法特别复杂,要么步骤并不全面。典型的错误有两个,...(展开)

原型

 Axure教程:Banner图片...

想要用Axure做出动态效果其实并不难,一旦了解了其动作,是非常好实现的。本篇文章将会教大家如何用Axure做动态效果。Axure做动态效果,只要了解了其动作规...(展开)

原型

 网站的通用注册原型设计

一般注册过程包括以下步骤:用户按照提示填写表单。用户在填写表单的时候提示是正确否输入了内容,如果没有,提示用户。用户提交表单,所有项是否都正确,如果出错,提示哪...(展开)