连续requestAnimationFrame反应

Question

我正在制作某种“连续”动画。假设一个div从其当前位置200px向右转换。可以选择改变翻译的距离。在其动画化时，用户从200px更改为400px。div仍然应该平稳地移动，直到它到达它的最后一点，即从它以前的位置的400px。我已经做了基本的运动动画，但我不知道如何使它继续，而不跳跃时，距离改变。

下面是我正在研究的码箱，它最好地说明了我上面的观点，以及我正在努力解决的问题。任何想法或帮助都将不胜感激。谢谢：)

编辑:重现跳跃问题的步骤：

• 打开沙箱
• 单击“切换”按钮
• 单击“添加距离”按钮
• 当红色div动画时，再次单击“添加距离”按钮

你应该看到div跳跃

Answer 1

也许有一种方法可以修复您的代码，这样它就可以按照您的需要工作，尽管我建议转向另一个方向。在React中有几个动画库可以帮助您解决这个问题。生成的代码也将更具可移植性。

根据您的具体需要，我建议使用一个名为react-move的库。它是提供其他酷库的react-tools的一部分。我创建了一个CodeSandbox，并使用react-move处理了您的问题。

我只为您的代码使用transform行，因为我想关注如何将库集成到示例中。

为了创建动画，我从react-move导入了一个名为Animate的组件。它是图书馆的主要组成部分。您可以使用此组件使用function模式包装function as child。此函数将接收一个state对象，其中包含有关动画元素的信息。它还使用一个start、update、enter和leave函数，该函数表示这些操作的state。

在您的内部，function as child函数是定义动画的地方。在我们的例子中，我们希望使用在Box对象上提供的x值沿着它的x轴来转换state。

Box (**x === 0**)：在我的示例中，当的偏移值大于窗口的宽度时，返回到start (**x === 0**)。

希望能帮上忙。