循环和排列 Loops&Arrays丨Framer 文档 Programming
程序员文章站
2022-07-12 21:09:03
...
一遍也就是用来做列表的。
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"