Телеграм канал Дизайнер учит код
Канал о том, как дизайнер интерфейсов осваивает код, чтобы научиться создавать интерактивные прототипы.
Автор: @boboshko .
Бот-резюме: @BoboshkoRobot .
Поделиться с друзьями:
статистика поднять канал
О чём пишут в канале @semeonboboshko
Доступ к контенту (документы, аудио, видео, изображения) возможен только в приложении Телеграм.
2017-12-11 12:29:12
Доступ к контенту (документы, аудио, видео, изображения) возможен только в приложении Телеграм.
2017-12-05 12:29:16
Доступ к контенту (документы, аудио, видео, изображения) возможен только в приложении Телеграм.
2017-11-07 12:29:04
На минувших выходных дал небольшое (шучу, большое) интервью Дмитрию Склярову.
Наконец-то у меня появилась возможность высказаться. Получилось аж 40 минут! В интервью я немного рассказал про дизайн в регионах и дизайн в целом. Есть интересные подробности про Mentorforces.com.
Дима собирается проводить подобные интервью с дизайнерами на регулярной основе. Вы можете подписаться на его канал, чтобы не пропустить новые выпуски.
Ну и если захотите, чтобы я рассказал про дизайн или свои проекты — зовите!
2017-09-20 12:29:10
В общем, такие большие посты я теперь буду оформлять через Telegra.ph, чтобы было удобнее читать. Вот ссылка на этот: http://telegra.ph/Framer-bloki-v-cikle-08-28
2017-08-29 12:30:10
На этом пока всё. Весь прототип занимает 52 строки. Возможно, кажется, что его реализовать было просто, но это не совсем так. Я потратил на это несколько дней. Скорее всего, времени ушло бы больше, если бы в некоторых моментах мне не помогли ребята из Learn Framer. Но сложно будет не всегда, а только в начале. ?
Также вы можете присылать мне свои идеи для прототипов и задавать вопросы. Можно это сделать напрямую (@boboshko ) или через моего бота (@BoboshkoRobot ).
2017-08-29 12:29:05
Блоки в цикле. Часть 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
2017-08-29 12:29:04
Началось!
Я наконец-то добрался до CoffeeScript и Framer. В общем-то, это то, ради чего создавался канал.
Не смотря на то, что в начале этого года я проходил пилотный курс Антона Карташова по Framer, мне пришлось вспоминать очень много всего. Да и одним курсом все нужные знания не получить. И чтобы с чего-то начать, я попросил ребят из Learn Framer подкинуть мне простенькую задачку. Хочу сказать им спасибо за задачу и помощь с кодом.
Задача звучала примерно так: необходимо нарисовать блок размером 256 х 64 с текстом внутри. Блок должен быть в виде класса и вызываться с помощью menu_link = New Link. При наведении на блок должен срабатывать hover. Также блок должен повторяться в цикле 5 раз и в каждом отдельном блоке должен быть разный текст.
Я выполнил всё, кроме того, чтобы сделать блок в виде класса. К сожалению, я пока ничего не знаю про классы.
Перед тем как рассказать про код, можно посмотреть получившийся прототип: https://framer.cloud/mmYdl
Важно помнить, что все прототипы Framer корректно работают только в WebKit-браузерах.
2017-08-28 12:29:09
Доступ к изображению возможен только в приложении Телеграм. https://framer.cloud/mmYdl
2017-08-28 12:29:08