Axure知识汇总Axure RPaxure

Axure中继器解析

2017-02-06  本文已影响113人  斗梦丶

1 中继器

1.1 数据集

中继器有一个自带的数据集,如下图:

中继器数据集

Axure8环境下,拖入中继器,单击中继器,右上角属性一列中可以找到。
这个数据集有以下特点:

操作

这个数据集的内容参数,可以通过事件的触发与中继器的子视图进行交互,极大的方便了这种信息格式的数据的加载效果。

1.2 视图

中继器刚被创建时,子视图默认为一个矩形。当我们需要更改子视图显示时,可以根据需要,把矩形删掉,创建自己的布局视图。

1.2.1 布局和间距

中继器默认布局为垂直的链表。我们可以在中继器的样式中对其布局属性进行修改,以达到我们想要的效果。间距可以设置两个子视图中间的距离。
下图为间距和背景的实现效果:

中继器样式布局和间距效果

1.2.2 背景

中继器的子视图背景交替要设值其样式中的背景属性,并将子视图的样式中的填充属性改为透明(透明度为0,或依据需求自己更改),这样才能实现要达到的效果。
上图中由于未将子视图的填充设置为透明,就未实现背景交替的展示。

实现背景交替效果

1.2.3 分页

分页,设置之后,一个页面只会显示相应的子视图数量,我们可以通过设置按钮来对下一页进行加载,详细见样例。

分页设置

1.3 交互

一共有载入,每项加载,项目调整尺寸三个交互事件。
值得说明的是,中继器自己已经实现了项目调整尺寸这个效果,所以有一个项目调整尺寸事件来实现交互。他对变化元件的下面的元件有推动和拉动的效果,这是中继器很方便的一点。详细见我初识Axure文章的Demo04中播放后的变化。
http://www.jianshu.com/p/58a00f9d3d68

2 一个小样例

2.1 基本实现加载分页

原料 配方 背景色交替

使相邻子视图变得清晰,相对独立。

翻页交互效果

同理可设置鼠标移出时事件,达到鼠标移入变色效果。

设置值

同理,可以设置其他的昵称id,时间,内容等等。

设置页码

这儿最好使用,原来的Previous(上一页)和Next(下一页)。

2.2 优化点击交互

2.2.1 优化后的样子

增加的效果:

gif效果图.gif

2.2.2 优化中的问题:

在后续优化中,设置了鼠标按下时和鼠标松开时的交互。发现该交互与鼠标单击时会产生冲突,我们需要把鼠标单击时的事件移到鼠标松开后之中。
上下翻页可以设置默认值,不选择Value,选择Previous设置为上一页,Next设置为下一页。

2.3 Final:

2.3.1 结构

结构

2.3.2 交互

上一页按钮 下一页按钮

3 分享

一个在线视频转换Gif的网站:

http://ezgif.com/video-to-gif

上一篇下一篇

猜你喜欢

热点阅读