Size: a a a

Фреймер-чат

2017 December 02

RS

Ruslan Sharipov in Фреймер-чат
источник

AL

Anton Lapko in Фреймер-чат
Саша Окунев
Моё решение задачи №1

Проект: https://framer.cloud/ujgds

План действий:

1. Скрываем все слои

2. Сдвигаем You из старого лого

3. Смещаем красный экран налево и уменьшаем его

4. Всё веселье в складке tubeContainer. Делаем ему клип. В состоянии нового лого жмём маску. Сама маска имеет тот же размер, что фрейм красного экрана. Помимо того что она жмётся, она ещё сдвигается на то же место, что и красный экран.

5. Двигаем надпись tube за пределы маски.

6. Проявляем плей со скоростью animationTIme/4.

7. Новый лого YouTube ставим ровно под старый, скрываем букву T из него. Двигаем налево. В конечном состоянии проявляем букву T, пока она загорожена экраном.

8. Все слои, которые участвуют в анимации, складываем в мешок cast и запускаем по циклу.

9. Букву T и значок Плей проявляем на дилее.
Саша, это упрощенная версия. Текст новой надписи YouTube отличается и по цвету и по начертанию
источник

AL

Anton Lapko in Фреймер-чат
У меня вчера все таки получилось добиться синхронного выезда из маски нового текста, но только с помощью пары костылей
источник

AL

Anton Lapko in Фреймер-чат
источник

AL

Anton Lapko in Фреймер-чат
Вот тут детально описывается в чем отличия: http://catyaguilera.com/dissecting-youtubes-new-logo/
источник

СО

Саша Окунев in Фреймер-чат
Anton Lapko
У меня вчера все таки получилось добиться синхронного выезда из маски нового текста, но только с помощью пары костылей
Ни ты, ни кто либо другой при такой короткой анимации не придаст этому значения. Ты потратил время на подгон слова Tube, написал костыли, но твоя старательность никем не будет оценена. Я против перфекционизма, потому что на него уходит много времени. Главный принцип Фреймера — Fake it till you make it. Если не видно разницы, зачем платить больше?
источник

AL

Anton Lapko in Фреймер-чат
Согласен, почти никто не заметит разницу, просто захотелось действительно скопировать оригинал и посмотреть на сколько это будет сложно во Фреймере. Это сложно и долго, да
источник
2017 December 03

СО

Саша Окунев in Фреймер-чат
источник

СО

Саша Окунев in Фреймер-чат
#задача №2 Пускаем волны из точки

Правила конкурса: В течение недели дизайнеры присылают мне ссылку на Фреймер Клауд. Тот, кто выполнит условия и пришлёт лучшую реализацию, получит возможность проанонсировать что-то околодизайнерское на Скетч-дизайнере.

Прикольно, когда можно пускать волны из места, по которому кликнули. Это может быть использовано на картах или в играх для оживления интерфейса. Чтобы это реализовать, будем ловить координаты клика.

Задача: реализовать анимацию расходящихся кругов, как в видео выше.

Условия: размеры прототипа — iPhone7. Количество кругов можно менять, скорость анимации задавать через переменную time. Пропорции и цвет не важны.

Задача будет довольно простой, поскольку я сделал подсказку, в которой уже реализован мезанизм отлова:
framer.cloud/wGrAR/

Буду смотреть на циклы создания и проявления кругов.

Дедлайн: 11 декабря, понедельник, 00:00, GMT+3
источник

D

Denis in Фреймер-чат
Насколько хорошо Фреймер дружит с React Native? Используются те же принципы или есть что-то другое?
источник

СО

Саша Окунев in Фреймер-чат
Denis
Насколько хорошо Фреймер дружит с React Native? Используются те же принципы или есть что-то другое?
Думаю, это вопрос, который нужно задавать Sergey.
источник

RK

Roma Klyukin in Фреймер-чат
а как можно автоматически стартовать и зациклить анимацию между стейтами?
источник
2017 December 04

SN

Sergey Nikishkin in Фреймер-чат
Не совсем понял вопрос про React Native. Я знаю только один пример, когда экспортируемый во Фреймер скетч файл наследовал стили и логику реакт компонентов. Альфа-лаба такое делала еще год назад, но это очень дорого.
источник

ИП

Игорь Проскурин in Фреймер-чат
Denis
Насколько хорошо Фреймер дружит с React Native? Используются те же принципы или есть что-то другое?
По сути никак, фреймер средство прототипирования максимально приближенное к реальному приложению, реакт это библиотека, которая компилируется в es5 и objective-c
источник

ИП

Игорь Проскурин in Фреймер-чат
Ребят, бросьте идею найти тулзу, в которой вы сделали прототип и он будет работать как реальное приложение/сайт
источник

ИП

Игорь Проскурин in Фреймер-чат
Такого не будет в силу того что помимо ui составляющей есть еще куча библиотек необходимых для хранения данных и тд
источник

ИП

Игорь Проскурин in Фреймер-чат
Sergey Nikishkin
Не совсем понял вопрос про React Native. Я знаю только один пример, когда экспортируемый во Фреймер скетч файл наследовал стили и логику реакт компонентов. Альфа-лаба такое делала еще год назад, но это очень дорого.
Логику он не экспортировал, он генерил верстку не более
источник

ИП

Игорь Проскурин in Фреймер-чат
И это не альфа лаб, а airbnb
источник

ИП

Игорь Проскурин in Фреймер-чат
У них есть тулза react sketch app
источник

ИП

Игорь Проскурин in Фреймер-чат
Суть в том, что все слои и фигуры в скетке это набор точек в виде json, на основании этого она генерит верстку)
источник