Как правильно спроектировать анимации в проекте? Мне надо передавать состояние анимации

Question

Как правильно спроектировать анимации в проекте? Мне надо передавать состояние анимации

из одного компонента в другой. Например, на взаимодействие с одним элементом реагируют другие.
Через локальный стейт неудобно, засоряются компоненты, плюс происходит перерисовка
Через state manager тоже не вариант, во-первых, та же перерисовка, во-вторых анимации не относятся к бизнес логике

#frontend #javascript #programming #react.js #russian

0

17.06.2021

11 ответов

8 просмотров

Face Direct

А с каких пор правильной архитектурой является присутствие бизнеслогики в компонентах, а вынос анимаций за их пределы? Вы сами создали себе задачу и сами же не можете придумать для неё решение

0

17.06.2021

Igor Lobanov

а расскажите, что у вас за кейс когда нужно передавать состоянии анимации однго компонента в другой

0

17.06.2021

Andreev Andrey Автор вопроса

Про бизнес-логику в компонентах я ничего не писал, это не правильный подход Анимации срабатывают в компонентах по триггеру, плюс мне надо передавать компонентам информацию (например, положение мыши, завершилась ли другая анимация и тд)

0

17.06.2021

Dmitry

Не знаю как в браузере. В реакт натив анимации шарить можно. Это применяется прям везде (Свайпом выход из экрана и там анимируется несколько элементов)

0

17.06.2021

Face Direct

Окей, моя оплошность, я до конца не уверен, но мне кажется вам стоит посмотреть в сторону обсервера

0

17.06.2021

Andreev Andrey Автор вопроса

Вопрос не про «крутилочки» и «всплывавки», я его не очень точно сформулировал. Мне надо динамически изменять положение компонентов и анимировать их при взаимодействии пользователя Для этого компонентам надо знать, что пользователь делает, какую анимацию он затриггерил и тд. Вынести это все в одну компоненту не представляется возможным

0

17.06.2021

Andreev Andrey Автор вопроса

Спасибо)

0

17.06.2021

Артур Мудрик 🇮🇱🇷🇺

Создав отдельный синглтон-класс сервис

0

17.06.2021

Dmitry Remezov

От реализации же зависит. const [position, setPosition] = useState([0, 0]); useEffect(() => myEvents.on(PositionChanged, setPosition), […]); return <div style={{ left: position.x, top: position.y }} /> vs const ref = useRef(null); useEffect(() => myEvents.on(PositionChanged, ([x, y]) => { ref.current.style.left = x; ref.current.style.top = y; }), […]); return <div ref={ref} />

0

17.06.2021

Andreev Andrey Автор вопроса

Спасибо

0

17.06.2021

alex · Accepted Answer

alex

а какой-нибудь “контекст” не подойдет?

0

17.06.2021

169 похожих чатов

Как правильно спроектировать анимации в проекте? Мне надо передавать состояние анимации

11 ответов

Похожие вопросы