反应js

Question

我在React中有2个场景。在场景1中，有一个带有计时器的div，其颜色应该从绿色变为红色180秒。问题是用户可以随时切换到场景2并在一段时间后切换回场景1。所以我需要一种方法来启动动画，而不是从头开始，而是从用户切换到场景2后转换的颜色，在那里花了一些时间并切换回场景1.

例如：

1. 用户打开场景1
2. 用户在那里花了40秒，颜色转换为一些橙色的
3. 用户切换到场景2并在那里花了30秒然后切换回场景1

因此我需要一些可以转换颜色的js魔法，以便转换从用户在场景1上花费70秒并且转换时间为110秒时所存在的颜色开始。我现在能够想到的是一些可以转换颜色的库，我可以在其中指定转换开始的开始时间（时间或百分比，无关紧要），但我现在找不到它。如果您知道其他任何方式，请告诉我。谢谢！

Answer 1

我以某种方式使一切工作。我所做的就是保存并在需要时通过道具获得经过的时间，根据经过的时间计算所需的色调（从120 - 绿色到0 - 红色），为一个方法改变当前的色调状态它只会每秒更新HSL设置div颜色所需的div颜色色调值。附加1s CSS颜色过渡用于平滑颜色变化。