Недавно я погрузился во Framer X, Javascript и React и думаю, что не хватает чего-то очень важного в отношении пользовательских переходов между экранами (которые во Framer являются просто «фреймами»).
То, чего я хочу добиться, похоже на то, что делает MengTo в своем руководстве (см. https://designcode.io/framer-x-animations-overrides), а именно создание пользовательского перехода между двумя экранами, как показано ниже: Экран A, Экран B
Проблема. В отличие от руководства, я не хочу, чтобы элементы экрана B также находились в иерархии экрана A для достижения желаемого эффекта. Почему? Потому что наши дизайнеры всегда будут создавать отдельный кадр для визуализации экрана Б.
Общая цель: иметь возможность сообщать каждому элементу на экранах A и B, как анимировать (т. е. постепенно менять свои свойства с течением времени) с помощью инспектора фреймов при возникновении события (например, при нажатии кнопки). ).
Мой подход:
- Создавайте общие переопределения кода, которые перемещают/изменяют размер/исчезают и т. д. элемента. Чтобы их можно было повторно использовать в различных проектах и чтобы разработчикам не приходилось писать код, мне нужно, чтобы параметры (например, целевое положение, целевой размер и т. д.) настраивались в Инспекторе -> Вопрос 1: это Можно ли предоставить инспектору параметры переопределения, как это делает
PropertyControlsдля компонентов кода? - Назначьте несколько переопределений кода одному и тому же элементу и активируйте другой в зависимости от события, например. иметь разное переопределение кода, срабатывающее для перехода «выход» и «вход» экрана -> Вопрос 2: возможно ли назначить более одного переопределения кода для элемента и запускать каждое из них на другое событие?
- Приятно иметь: создайте пользовательский компонент кода, который использует свойство
children, и поместите его на экран A, чтобы я мог подключить его к соответствующему компоненту на экране B на холсте. Затем получите все свойства элемента на экране B, которые являются общими для двух компонентов, и используйте их в качестве целевых значений для анимации. Таким образом, дизайнеру не придется вводить все целевые значения вручную. -> Вопрос 3. Могу ли я получить доступ к этим целевым значениям в пользовательском компоненте из переопределения кода.
Вопрос 4. Если даже возможно достичь желаемого эффекта, имеет ли смысл этот подход? Или в магазине Framer есть существующая библиотека Framer X, которая уже делает то, что я ищу?
Мне нужны только указатели в правильном направлении, заранее спасибо!
