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

Первым делом, нужно подключить шрифт, который будет использоваться в прототипе:

Utils.insertCSS("@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';")

Цифры в конце ссылки — это подключаемые начертания: Light, Regular и Bold. Я решил подключить на всякий случай всё.

Эти переменные хранят в себе HEX-код цветов:

yellow = new Color("fac112")
white = new Color("FFFFFF")
black = new Color("000000")
blackShadow = new Color("rgba(0,0,0,0.1)")

Переменная blackShadow дополнительно хранит в себе свойства альфа-канала (прозрачности). Я решил записать цвета в переменны по нескольким причинам.

Во-первых, так будет проще использовать нужные цвета.

Во-вторых, если один цвет будет использовать в прототипе много раз, то если я захочу его изменить, мне придётся менять его в каждом месте, где он есть. А так, я просто меняю цвет в переменной и он меняется повсюду.

Параметры анимации, записанные в переменную:

curveSpring = "spring(300,20,50)"

От этих параметров зависит то, как будет себя вести объект во время анимации, которому присвоена эта переменная.

Тут я говорю, что цвет фона — жёлтый:

bg = new BackgroundLayer
backgroundColor: yellow

Тут у меня два массива (шутка про два стула):

buttons = []
words = ["Index 0", "Index 1", "Index 2", "Index 3", "Index 4"]

Массив buttons — пустой и нужен для того, чтобы хранить блоки из цикла. А вот массив words сразу же содержит в себе текст, который будет выводиться внутри блоков.

#Framer