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