1. 主页 > 行业资讯 > 设计文章 >

Axure教程:使用中继器旋转图片

编辑指南:本文与大家分享如何使用Axure repeater做照片轮播效果。作者对预习图、所需原稿、操作步骤逐一进行分析,并介绍了过程中需要注意的问题,希望对你有所启发。

你好,今天,我教我的大学用复读机做照片旋转。

为什么要用中继器来做图片转盘

开始教之前,先讨论一下为什么要用复读机做照片旋转。

首先,市面上图片轮播的教程都是用动态面板做的。他将不同的图片放入不同的动态面板中,然后通过设置动态面板的下一个和上一个来实现转盘。这样做没有问题,但是使用起来很不方便。为什么?第一,动态面板相当于写死。比如你有4张轮播图片,下次想改成10张,需要多复制6页,在每一页上设置交互和导入图片;第二,如果我想改变旋转木马的大小,我必须在10页上修改它。因此,浪费了大量时间,导致制造的部件的可重用性低。

因此,作者制作了一个带有中继器的照片转盘原型,只需将图片导入中继器表即可自动生成交互,只需修改一次即可修改交互大小。它非常方便快捷,而且完成后可以高度重用。

原型效果预览

以下是一个好的旋转木马的效果,你也可以自己体验一下

原型演示地址:https://cspfgk.axshare.com/

原型教学

1.所需材料

中继器×1,图片×1,动态面板(循环面板)×1,左按钮×1,右按钮×1。

如下图所示放置

2.中继器表设置

共有两栏,可按如下所示填写,并设置直放站水平布局

no:图片序号,按123456顺序先写,用于轮播的交互逻辑。picture:图片,右键导入图片,或者复制粘贴图片地址。

3.中继器的相互作用

加载每个项目后,将图片值设置为item.picture

加载中继器时,添加排序按否的升序排列

完成后,将中继器更改为动态面板(面板1),将面板1更改为动态面板(面板2)。这里解释一下,面板1是用来做鼠标左右拖动交互的。面板2是因为移动交互无法选择中继器,所以应该变成动态面板。

面板1交互

面板1的尺寸与图片的尺寸相同

加载面板1后,将面板1移动到-[[LVAR1.width]],其中LVAR1.width表示图片的宽度。因为点击左键可以动态移动其中一张图片,所以默认需要向左移动。

面板2交互

向左拖动结束时触发右按钮事件。

拖动结束时,当按钮鼠标单击时触发事件。

4.左右按钮的交互

当鼠标点击右键时,我们想要做出一个动态的移动效果。首先,我们简单解释一下这个想法。点击时,我们先将面板1的距离移动一个图片,然后更新线条,将原来的第一个图片变成最后一个,最后一个变成倒数第二个...以此类推,最后将面板1恢复到原来的位置,这样我们就可以进行下一步操作了。

第一步是禁用该按钮(因为如果它被禁用,在第一次移动完成之前,它将开始在连续点2下移动更多)

在第二步中,移动面板1向左移动一个图片距离,即,-[[LVAR1.width]],LVAR1.width表示图片宽度。动画选择是线性500毫秒

第三步,等待画面移动,设置等待550 ms。

������ҳ���

第四步,更新中继器,首先标记所有行,将所有行的序列号更新为原序列号-1(即TargetItem.no-1),然后将更新序列号为0的行更新为最后一行,[[Target Item。复读机。项目计数]]

第五步是将面板1移动到原来的位置,即[[LVAR1.width]]。在这里,注意不要在瞬间动画化。

最后一步是启用此按钮。

同样,用鼠标单击左键也可以做到这一点:

第一步是禁用此按钮

在第二步中,移动面板1被移动一个图像距离,即[[LVAR1.width]],其中LVAR1.width表示图像宽度。动画选择是线性500毫秒

第三步,等待画面移动,设置等待550 ms。

第四步,更新中继器。首先更新最后一行[[目标项。复读机。项目计数]],并将其序列号更新为0。然后标记所有行,并将所有行的序列号更新为原始序列号+1(即TargetItem.no+1)。

第五步是将面板1移动到其原始位置,即-[[LVAR1.width]]。在这里,注意不要在瞬间动画化。

最后一步是启用此按钮。

5.制作自动转盘

我们使用圆形动态面板来制作自动旋转木马的效果。首先,在面板中添加状态2

加载时将面板状态设置为下一个(反向循环,间隔3000毫秒)

状态改变时,当鼠标右键单击时触发的事件

6.整个投资组合的事件

最后,我们将所有组件组合在一起,以实现当鼠标移动到组合中时不会自动旋转的效果

当鼠标移入时,显示左右按钮,循环动态面板的状态设置为停止循环

当鼠标移出时,隐藏左右按钮,并将循环动态面板的状态设置为下一个(反向循环,间隔3000毫秒)

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/534.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息