做设计时，为了达到某种效果，我们通常需要用到重复的素材。

比如，下面这个撑伞的人，每一个的大小和位置都不一样。你该不会一个一个去缩放和调整坐标吧？

再比如，下面这个喷涌而出的动效，包含多种颜色、多种大小的彩色多面体。你不至于设计出数十种多面体，再一个一个设计路径吧？

重复的素材能营造壮观的效果，但是设计起来却不简单。耗时耗力不说，眼睛都快看瞎了。

那么，有什么方法可以快速地制作重复素材，节省你大量的时间吗？

接下来，谈一谈如何利用iH5的“循环”事件，来制作重复素材。

【工具】

www.iH5.cn（3.0版本）

 所谓循环，其实就是同样一件事情重复做N遍的一种方法。

先给大家看一个案例：

在以上案例中，我们的目标是复制一个模板文本，形成一个格子的矩阵。

注意，在这个复制的过程中，每个文本的位置，和每个文本的内容（显示的数值）都是不一样的，这个就是在循环事件的设置过程中，按需进行设置的。

为了能够说明循环的原理，我们在这个案例中先用触发器来模拟一个简单的循环。

一、 使用触发器模拟循环

步骤：

1.     新建页面，先在页面下添加文本（充当克隆模板，长宽为60像素）和对象组，对象组里添加计数器、文本、触发器等，如下图所示。

2.    设置触发器属性

触发器的时间间隔设为0.1秒，播放次数设为10次。

这样，这个触发器会每隔0.1秒触发一次，连续触发10次。

3.    添加触发事件

首先给按钮添加事件：点击，让触发器进行播放。

接着给触发器添加事件：当触发器播放的时候，让对象组进行复制对象，复制的对象就是一开始设置的克隆模板。同时，计数器加1。

接下来就是要确定复制的格子的位置：X坐标和Y坐标，以及格子显示的数值。

为了让每次复制格子时，格子的位置和数值不一样，我们需要用到计数器（命名为次数），这个计数器的作用就是记录复制的次数，同时也是格子上显示的数值。

因此，从0开始，每复制一个格子，格子的X坐标设为：（计数器）*（格子宽度）。

同时，每次复制完成，让计数器+1。

为了让格子间有间隔，我们可以在克隆模板宽度的基础上+1，这样，每个格子之间就有1个像素的间隔。

所以，

X坐标的公式：（计数器）*（格子宽度+1）；

Y坐标要在对象组内进行计算，而不是舞台，这里设置为100。

格子的数值（内容），就是计数器的次数。

因此，我们通过一个计数器来记录当前复制的次数，每次复制完成，把次数加1，同时在复制的时候，用这个次数来控制复制出来对象的X，就可以连续复制出一排格子了。

二、 用“循环”事件来制作循环

运用类似的思路，我们可以使用循环来优化以上过程。

触发器的最小间隔是刷新帧率，通常是1/60秒，所以无法做到“同时”复制一堆格子出来。

而循环的执行速度，通常是每秒上亿次，所以我们可以做到“同时”执行多个行为。

步骤：

1.    同样是在页面下添加文本、对象组、文本按钮，不同的是不用添加计数器和触发器。

2.    给文本按钮添加“循环”事件，具体如下图：

比较一下循环方案和触发器方案的事件面板，基本上是完全一样的，除了在循环方案中，我们把循环的次数填在循环条上，而不是触发器的触发次数里。

另外，循环方案中，有一个内置的“循环次数”变量，可以直接选择，而不需要使用一个额外的计数器来记录。

最后需要注意的是，在添加循环事件后，需要将复制对象的事件拖动到次数循环下，再进行设置，具体如下图。

三、 多重“循环”

最后，循环是可以有多重的。

在案例的最后一个部分中，就使用了两次循环 ，来创建格子矩阵。里层，用来创建一行格子，外层，用来重复第一层的“创建行”的动作，来创建多行格子。

注意，当有多层循环的时候，从外向里，循环次数变量的调用，分别为循环次数1，循环次数2... 

所以，在以上案例中，“循环次数1”代表创建的行的次数，“循环次数2”代表创建的列的次数。

最后，附上案例下载地址：

http://www.ih5.cn/editor3/app/workCopy/5582365 

在电脑上登录iH5账号后，把上面这串地址粘贴在浏览器打开，这个案例就会下载到你的账号了！

当然，这里举的例子是最基础最简单的，其实“循环”还能做更多复杂有趣的案例，有待大家的研究~