Axure中继器解析
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 优化后的样子
增加的效果:
- 鼠标移入移出变色效果,鼠标移入移出交互事件。 鼠标按下,变色,松开实现翻页并恢复颜色。
2.2.2 优化中的问题:
在后续优化中,设置了鼠标按下时和鼠标松开时的交互。发现该交互与鼠标单击时会产生冲突,我们需要把鼠标单击时的事件移到鼠标松开后之中。
上下翻页可以设置默认值,不选择Value,选择Previous设置为上一页,Next设置为下一页。
2.3 Final:
2.3.1 结构
结构2.3.2 交互
上一页按钮 下一页按钮3 分享
一个在线视频转换Gif的网站: