欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

循环和排列 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"