Блоки в цикле. Часть 2

Это цикл for...in. Отдельные его куски я разберу чуть ниже, чтобы сейчас не потерялась разметка.

for i in [0..4]
buttons[i] = new Layer
width: 256
height: 64
x: Align.center
y: 100 + i * 100
borderRadius: 3
backgroundColor: white
animationOptions:
curve: curveSpring

title = new TextLayer
text: Utils.randomChoice(words)
parent: buttons[i]
fontFamily: "17px Roboto"
color: black
textAlign: "center"

title.center()

buttons[i].states.a =
scale: 1.2
shadowY: 5
shadowColor: blackShadow
shadowBlur: 10

buttons[i].states.b =
scale: 1
shadowY: 0
shadowColor: blackShadow
shadowBlur: 0

buttons[i].onMouseOver (event, layer) ->
layer.states.next("a")

buttons[i].onMouseOut (event, layer) ->
layer.states.next("b")

Объявление цикла и указание количества итераций:

for i in [0..4]

Я уже как-то писал, что отсчёт начинается с 0, а не с 1.

Затем, создаётся основной слой — buttons:

buttons[i] = new Layer
width: 256
height: 64
x: Align.center
y: 100 + i * 100
borderRadius: 3
backgroundColor: white
animationOptions:
curve: curveSpring

Из интересного тут два момента. Во-первых, buttons[i] = new Layer — теперь это новая переменная с блоками из массива. Более того, не нужно даже писать что-нибудь вроде buttons.push block, чтобы блоки отправились в массив. Всё делается автоматически.

Во-вторых, y: 100 + i * 100 — делает отступ от каждого последующего блока в 100px.

Настройки текстового слоя:

title = new TextLayer
text: Utils.randomChoice(words)
parent: buttons[i]
fontFamily: "17px Roboto"
color: black
textAlign: "center"

title.center()

parent: buttons[i] — здесь назначается родительский объект. Это нужно для того, чтобы текст всегда был внутри блока и дублировался вместе с итерациями цикла.

text: Utils.randomChoice(words) — случайным образом извлекает индекс из массива. Таким образом, на каждом блоке будет разный текст. Если перезагружать страницу с прототипом, то можно заметить, как меняется текст на одном и том же блоке.

Это states:

buttons[i].states.a =
scale: 1.2
shadowY: 5
shadowColor: blackShadow
shadowBlur: 10

buttons[i].states.b =
scale: 1
shadowY: 0
shadowColor: blackShadow
shadowBlur: 0

Они нужны для того, чтобы хранить в себе параметры анимации. У меня их два: states.a — отвечает за hover на блок. states.b — отвечает за то, когда курсор убрали с блока.

А это обработчики событий:

buttons[i].onMouseOver (event, layer) ->
layer.states.next("a")

buttons[i].onMouseOut (event, layer) ->
layer.states.next("b")

onMouseOver — обрабатывает hover, а onMouseOut — обрабатывает событие, когда курсор убрали с блока.

#Framer