我为那些想我一样不是很擅长于写代码（但是很擅长复制&粘贴）的人写了这一系列的Framer备忘录。我们将会学到一些简单的属性和常见的用法。如果你还没有购买Framer，下载一个2周的试用版。如果想看这个系列的其他文章，点击The School of Do。
在本章Framer备忘录中，我们将学习如下知识点：
1.什么是循环
2.什么是数组
3.创建一个循环
4.利用循环来摆放图层的位置
5.循环中的交互
6.从数组中导入数值
7.将图层加入到数组中
8.依照一个数组的长度来创建一个循环
9.用循环遍历一个数组，以此来改变所有图层
10.一些常见的例子
1.什么是循环
你是一个懒人吗？我就是。幸运的是，循环让我们得到了解脱。从现在开始，你要学着抵制所有的笨方法，通过一些巧妙的方法来实现你想要的效果。
为了证明我的观点——让我们看看如果我需要创造3个图层会发生什么。
如果使用笨方法，会花费21秒钟——但是想想一下如果我需要25个图层呢？
但是使用循环只花费了11秒钟。看看这有多么简单。
让我们来比较一下两种实现方式。
2.什么是数组
一个数组存储了一系列的信息。这些信息可以是图片，名称，数值，布尔值（真/假），图层或者其他的一些东西。你可以将数组想象成一个清单，或者一个简单的数据库。
你可以用方括号[]来创建数组。
你也依据数组中的位置来调用任意一个指定的元素。
注意：数组中第一个元素的编号是0，不是1.不要问我为什么，我也在这个问题。
names[0] = “Mary”
names[1] = “Steve”
names[2] = “Mike”
3.创建一个循环
你可以通过循环的方式来轻松创建多个拥有相同属性的对象。
创建一个循环，或者说是for循环，只需要做如下几件事：
循环永远以“for”开始。接下来的是计数器——大多数人会使用“i”，但是你可以使用任何变量（如果你想，for Jacksparrow in [0...15] 同样可以运行）。在这之后是一个“in”。然后你需要定义数组从哪里运行到哪里。通常来讲起始点是0，结束点是你选择的数字。你定义的范围就是方括号[]中用“...”分隔开的范围。
小贴士：
两个点的范围（0..3）包括最后一个数字（0，1，2，3）。三个点的范围（0...3），不包含最后一个数字（0，1，2）。
4.利用循环来摆放图层的位置
数学，难道你不想念它吗？开个玩笑，我知道你是个设计师。幸运的是只要你把问题分析明白，Framer会代替我们做很多计算。
你可以这样利用一组循环让一些元素均匀的垂直分布：用图层的高乘以i。因为i的值在每次循环中都会变化，因此用它乘出来的数值也会变化。
在使用上面的代码时，第一个card的y值是：60*[0] = 0，
(第一个card).y = 60*[0] = 0
(第二个card).y = 60*[1] = 60
(第三个card).y = 60*[2] = 120
5.循环中的交互
循环中的交互会像正常情况下一样工作吗？
试一下下面的例子：
像这样尝试一下：
虽然你的鼠标经过了其他的图层——最后一个图层总是会响应操作。这是因为当你说"layer.backgrou.."你至的是最后一个创建的图层。并不是你的鼠标正经过的图层。所以我们要如何解决这个问题呢？我们在事件中使用“this”来代替图层的名字。
小贴士：
你也可以使用“@”来代替“this.”。
所以 this.backgroundColor = "#00aeff" 与 @backgroundColor = "#00aeff" 是完全相同的。
6.从数组中导入数值
数组可以给循环提供数据信息，同时循环也可以组成数组。
妙极了——原型可以如此逼真。让我们来研究一下数组如何给一个循环提供数据信息。在下面的例子里，card图层与一个姓名数组相关联。通过循环中的“i”指向数组中唯一部分。
7.将图层加入到数组中
现在让我们用循环来创建一个数组。在下面的例子里面，我们可以看到程序在循环中运行的每一个步骤。当运行到 cards.push(card) ，一个图层就被放进数组中。
8.依照一个数组的长度来创建一个循环
你可能遇到过这样一种情况——你希望创建一个循环次数与数组长度相同的循环，或者一个列表。向下面一样做，你就可以实现这个目标了。
9.用循环遍历一个数组，以此来改变所有图层
当你创建了一组tab标签或者一些类似的东西，你需要让除了被选中的图层以外所有的图层都处于非选中态。
第一个选择是用笨方法去控制每个图层。很惭愧的讲我以前就是这么做的。
第二个选择是用一个循环来遍历一个数组，一次来改变每个图层——然后将被选中的图层变成选中态。
10.一些常见的例子
10.1 网格
你可以使用循环嵌套的方式来创建一个网格（就像电影《盗梦空间》一样。。。但是是用循环）。
第一个循环创建行（或者列，这取决于你）。然后在这个循环中创建另外一个循环——这个循环用来创建每个单位。在下面的例子中你可以看到行是一个循环，而单位是另外一个循环。
尝试实现以下下面的例子来完全掌握网格的用法。
https://framer.cloud/ILhXw/
10.2 创建页面
通过一个循环创建多个页面比挨个创建要简单的多。
https://framer.cloud/GAXYu/
10.3 滚动
用循环来创建多个可以滚动的图层。当你创建一个列表时这个方法十分有效。
https://framer.cloud/btXcY/
10.4 创建多个移动的物体
需要创建雨滴？雪花？随机的点？这个例子可能会对你有帮助。
10.5 手风琴式菜单
在这个例子中，我们通过JSON运行一个循环。当你想导入一个列表时这十分有用。
https://framer.cloud/AnszR/
译者注：译自Medium，在翻译过程中将与设计主题无关的部分进行了删节
网友评论