Не успел немного, пришлось попариться с масками, но зато вышло именно то, что я хотел

Сам же заметил)) но не сделал

В оригинальной гифке переход делается через маску:

Да, есть свои сложности с таким синхронным выездом. Я долго парился, чтобы хотя бы не было видно выезда с масок. В моем примере задействованы 3 маски:
1. Маска старой надписи You
2. Маска старой надписи Tube
3. Маска нового текста YouTube
Сложность в том, что позиция надписи You должна совпадать с началом новой надписи YouTube и у них должна быть одинаковая скорость анимации. Причем на начале анимации новой надписи YouTube не должно быть видно. Я не допер как это сделать. Может у Саши получится решить эту задачу

Как лучше задать разные параметры анимации для разных свойств объекта?

Например, чтобы слой сначала поднялся с замедлением вначале, на середине пути у него изменилось скругление и в конце цвет поменялся без анимации...

Rectangle.states.a =
 y: 166
 borderRadius: Rectangle.width/2
 backgroundColor: "rgba(255,47,146,1)"
 
Rectangle.onTap (event, layer) ->
 Rectangle.stateCycle()

Хороший вопрос, мне тоже интересно

Utils.delay 0.6, ->

можно каждый state обернуть в утилс.дилэй и они будут запускаться по нужному таймингу

Rectangle.states.a =
 y: 166
 borderRadius: Rectangle.width/2
 backgroundColor: "rgba(255,47,146,1)"
 
Rectangle.onTap (event, layer) ->
 Rectangle.stateCycle()

Есть слой, есть два состояния и есть функция перехода по ивенту. Других инструментов в Фреймере нет.

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

Чтобы слой сначала поднялся с замедлением вначале, пишешь состояние, например rise. Если на середине пути у него должно меняться скругление, значит с замедлением будет подниматься не сам слой, а невидимый контейнер, внутри которого будет слой со скруглёнными углами. Значит, состояние rise будет у контейнера container.

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


1. Пишем дефолтные опции анимации:

animationTime = .5

Framer.Defaults.Animation = 
  time: animationTime

2. Создаём слои, оформи сам:

layer = new Layer
container = new Layer

3. Вкладываем друг в друга:

layer.props =
  parent: container

4. Cоздаём состояния:

layer.states.rounded =
  borderRadius: "8px"

layer.states.colored = 
  backgroundColor: "blue"

containerFrame = container.frame
container.states.rise =
  y: containerFrame.y - 100

5. Делаем триггер по дилею, потом после срабатывания анимации переключаем layer на цветной:

layer.onTap ->
  container.stateCycle()

  Utils.delay animationTime/2, ->
    layer.stateCycle()

  Utils.delay animationTime, ->
    layer.stateSwitch("colored")

По хорошему ещё нужно писать проверку на стейт, поскольку после второго клика будет рассинхрон состояний.

Спасибо, работает

Вообще я так понял что лучше не смешивать способы создания шейпов? либо через код, либо через экспорт из скетча?

Чаще всего получается доращивать свойства скетчовым объектам.

Моё решение задачи №1

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

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

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

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

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

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

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

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

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

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

9. Букву T и значок Плей проявляем на дилее.

Макет для самостоятельного импорта

Весь изюм в маске

Ну тоже надо со скоростью и таймингом задрочиться, чтобы небыло такого

Осваиваю тут protopie и вот такой интересный вопрос возник.
Можно ли, без сильных ухищирений сделать так, чтобы один прототип на фреймере отправлял данные на второй прототип? ну и желательно чтобы прототипы были запущены на разных девайсах.
Пример - 2 приложения для заказа такси: приложение клиента и приложение водителя. Клиент делает заказ - водитель получает заказ.

P.S. полагаю, что без внешнего самописанного сервера тут не обойтись.