如何利用组件的大小变化和移动变化实现3D阵列图片的自动切换显示？作者在这里给出详细教程与大家分享~ ~

今天分享实现五张3D阵列图片切换的方法，主要是利用组件的大小变化、移动变化、图层顺序、动态面板切换控制循环等技术点。效果图如下:

具体实现方法第一步：元件的实现

1.从左边拉入五个矩形，其中矩形C的大小设置为200 *300。将矩形b和d的大小设置为160*240。矩形A和E的大小设置为128*192。分别记录这五个矩形的X轴和Y轴坐标，包括矩形A (222，204)，矩形B (330，180)，矩形C (470，150)，矩形D (650，180)，矩形E (790，204)。

2.拉一个动态面板，添加两个状态，并命名为:控制循环。(功能是利用动态面板的循环切换来控制3D阵列画面组的循环播放。)

3.最后，引入一个名为:Status的文本标签。(功能是记录当前中顶的矩形序号。)

如图:(矩形的图层顺序为A、B、C、D、E，矩形E为顶层)

第二步：交互的实现

1.实现动态面板的循环切换:

在动态面板中选择控制周期，在加载时添加交互事件，选择设置面板状态-检查下一步，检查向后周期，检查周期间隔2000毫秒，检查第一状态延迟，如下图所示:

这样，面板可以实现无限循环切换。

2.实现动态面板循环切换时，显示控制矩形的循环切换:

首先，我们需要【文本标签“Status”】来记录当前位于顶部中间层的矩形。

其次，总共有五种情况，即矩形A、B、C、D、E位于顶部中间层。

最后，选择动态面板[控制周期]并添加交互事件[当状态改变时]。

情况一:当矩形C在中间(ABCDE)时，即如果“地位”一词等于C，那么

a、设置文本标签“状态”的文本等于d；此时，五个矩形的顺序就变成了BCDEA。

b、五个矩形的大小变成:矩形d是200 *300。矩形c和e是160*240。矩形B和A是128*192。

C.五个矩形的位置变成:矩形B (222，204)，矩形C (330，180)，矩形D (470，150)，矩形E (650，180)和矩形A (790，204)。

D.这时还需要调整矩形之间的图层顺序，即先把C和E放在最上面，再把D放在最上面。

如下图所示:

同样，接下来的四种情况是改变[state]的文本，改变五个矩形的大小和位置，调整图层的顺序。

3.页面初始状态图层的调整:由于页面的初始布局，矩形的图层顺序依次为A、B、C、D、E，矩形E为顶层，所以在加载页面时，需要先将矩形B、D放在顶层，再放C .(注:如果初始状态矩形的图层顺序为C顶层，B、D第二层，AE底层，此步骤不需要)

第三步：效果的预览

作者:火星人~ Ace，微信官方账号:Axure Canyon of Ace

本文由@火星人~ Ace原创发表于蜘蛛智慧链。未经允许禁止转载。

图片来自Unsplash，基于CC0协议。