Реакция синхронизации цветной анимации

Question

Я использую react для создания редактора. Одним из настраиваемых свойств является динамическое создание цветовой анимации фона. Например, бесконечный затухает и исчезает с вторым периодом x.

Проблема в том, что цветовая анимация должна быть одинаковой и синхронизироваться во множестве видов. CSS-анимация не позволяет эту синхронизацию без хаки. Я хочу использовать «реакцию-движение», но это не так легко синхронизирует время.

Ищите конкретные примеры, используя библиотеки реагирования + реагирования (в идеале реагирующие на движение). Заранее спасибо.

Answer 1

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

CSS-анимации абстрагирует все это от разработчиков, но в результате он дает очень мало контроля между анимациями.

React Motion react-motion, в то время как хорошая библиотека для работы с анимацией перехода (это намеченная цель) снова не затрагивает элементы управления между анимациями.

Эти ключи существуют в коде react-motion. Вам просто нужно запросить анимационные кадры один за другим, используя библиотеку raf, а затем вычислить анимацию для каждого вида с помощью общей информации о кадре. Это довольно утомительно, и здесь нет реального общего решения.

Answer 2

Непосредственный ответ на ваш запрос для примеров с помощью реагировать + реагировать на библиотеки, но если вы выполняете рендеринг на клиенте/браузере, вы можете использовать глобальный var для синхронизации между представлениями. Если это слишком «взломанно» для вас, то, возможно, найти общий родительский узел по лестнице, чтобы оба представления могли передавать синхронизированное значение var/value.