React颜色动画同步

React color animation synchronization

本文关键字:同步 动画 颜色 React      更新时间:2023-09-26

我一直在使用react构建编辑器。其中一个可配置的属性是动态生成背景颜色动画。例如,以x秒为周期的无限渐入渐出。

问题是颜色动画需要在多个视图中保持一致和同步。CSS动画在没有黑客的情况下无法实现这种同步。我想使用"反应-运动",但它不容易结合时间。

寻找一些使用react + react库(最好是react-motion)的具体示例。

不是对您使用react + react库的示例请求的直接回答,但是,如果您在客户端/浏览器上呈现,您可以使用全局变量来保持视图之间的同步。如果这对您来说太"hacky",那么也许可以找到一个共同的父级,两个视图都可以被赋予一个同步的var/value。

在对所有这些进行了相当多的研究之后,结果证明答案只是在动画帧级别上工作。

CSS动画将所有这些从开发者那里抽象出来,但结果是它在动画之间提供了很少的控制。

React Motion react-motion虽然是处理过渡动画的好库(它的预期目的)再次不解决动画之间的控制。

键存在于react-motion代码中。你只需要使用raf库一个接一个地请求动画帧,然后使用公共帧信息计算每个视图的动画。这很乏味,这里没有真正的通用解决方案。