循环和排列 Loops&Arrays丨Framer 文档

一遍也就是用来做列表的。

layerA = new Layer
    size: 50
    backgroundColor: "blue"
 
layerB = new Layer
    size: 50
    backgroundColor: "blue"
 
layerC = new Layer
    size: 50
    backgroundColor: "blue"

现在要建三个一样的层是这样，这还没有啥助兴，想象下要是属性超多，后面有想换个颜色，超麻烦啊！！所以可以通过 for-loop 简化。
首先，需要一个数组，需要多少个图层的数组，用语法 [1..3]表示，1..3 是 [1, 2, 3] 的缩写，两种都可以。

for index in [1..3]
    layer = new Layer
        size: 50
        backgroundColor: "blue"

index 是一个变量，表示该循环的该迭代的数组中的数字。从1开始，然后变为2，最后3。

因为是个数字，所以可以用来计算，并以列表的形式定位生成的图层。

for i in [1..3]
    layer = new Layer
        size: 50
        backgroundColor: "blue"
        y: i * 200

上面的代码将第一层的 y 定位在 200，所以后面的两层分别是 400、600。You can make arrays of practically everything, but a common use case is to put layers in an array, and loop over them. This is an easy way to change properties of multiple layers at once.

layerA = new Layer
layerB = new Layer
layerC = new Layer
 
# 将所有图层放在数组中，以便我们可以循环使用
layers = [layerA, layerB, layerC]
 
for layer in layers
    layer.size = 50
    layer.backgroundColor = "blue"

循环中的事件 Events in Loops

使用循环设置图层和处理事件时会出现一个非常常见的错误，在下面的代码示例中，可能希望点击的图层更改颜色，但是只有最后一个图层会更改颜色。

layerA = new Layer x: 0
layerB = new Layer x: 220
layerC = new Layer x: 440
 
layers = [layerA, layerB, layerC]
 
for layer in layers
    layer.onClick ->
        layer.backgroundColor = "blue"

这是因为一个叫 Scoping 的属性问题，可以在下面阅读更多信息。但如果遇到这种情况可以这样解决：

for layer in layers
    layer.onClick ->
        this.backgroundColor = "blue"