我正在尝试在 ReactJS 本机中为组件设置动画，以便它以圆形方式围绕一个点连续运行。基本上，我需要一个不断增加的计时器，我可以使用它来设置 X、Y 坐标，例如 {x: r * Math.sin(timer), y: r * Math.cos(timer)}

我发现这个指南有一些关于插值的非常有用的信息，但我仍然没有成功：

http://browniefed.com/react-native-animation-book/INTERPOLATION.html

如何像这样更新组件的位置？

额外问题：如何使动画连续？

背景

我一直在使用 React Native 和 Redux 构建一个应用程序，以评估是否将其用于即将推出的 Swift 项目并完全原生化。

我真的相信 Dan Abramov 使用 Redux 的技术是一个坚实的工程案例。不更新状态并将视图作为状态的函数很棒，我非常赞同这个想法。我有点不适应的地方是将动画加入其中。

设想

更复杂的动画需要状态管理，例如，淡出视图，替换文本并将其淡入。我只想在动画中途更新文本，这很容易使用本地状态并利用动画框架。

假设要显示的文本是由状态驱动的，它会在状态通过适当的动作和减速器组合更改的那一刻被更新，但为了演示，我需要在这两个动画之间使用它。

这方面的一个示例是从列表中选择一条记录，其中有一个显示所选记录名称的屏幕标签。理想情况下，您希望立即更新全局存储，但对标签本身执行良好的过渡。

我的想法

在我看来，使用组件内部的“本地状态”来处理动画是有一定意义的，而主要的 Redux 存储则用于更多的整体数据或架构状态。问题是这打破了视图是全局状态函数的想法，我不确定这是否适合我。

另一方面，通过编写大量动作、reducer 和使商店混乱来管理动画序列等也让人感觉不干净。

问题

我知道 React Native 还处于起步阶段，并不是每个人都在使用 Redux，但是在这种情况下是否有一种普遍接受的方式来管理动画？

该componentWillLeave功能和相应的回调是我在 RN 中没有见过的强大功能。没有它，您总是被迫使用额外的状态来生成非常糟糕的代码，以确保元素在其动画完成之前一直停留在页面/电话上，而理想情况下，来自 redux 的一些布尔状态只会触发元素的删除，同时尊重其willleave动画。

那么有没有人知道如何在 RN 中始终如一地实现这一点，而不必每次都编写自定义代码以确保元素保持渲染，直到您将其动画化？

我有一堆项目将一次显示 1 个，并且在安装/卸载时将在其自身和下一个项目之间进行动画处理。但我希望他们都以不同的方式制作动画。

这可以使用ReactCSSTransitionGroup吗？从代码看来，它不是而且只允许每组一个动画定义：

怎么样ReactTransitionGroup？看来这可行。这是我唯一的选择吗？

ReactTransitionGroup 是动画的基础。当以声明方式添加或删除子对象时，会调用它们的特殊生命周期钩子。

我读对了吗，每个孩子都会被告知“你要离开”或“你要进入”，然后它会自己做动画（CSS动画或jQuery等）？

有没有更好的方法来做到这一点（组内不同的动画）？

由于不同的原因，我试图重现滚动视图的平移行为。我在 PanResponder 中使用了 Animated.decay，但我需要将值限制在 0 和内容大小之间，以免超出范围

我使用 Animated.diffClamp 来做到这一点，但它并不完全钳制 AnimatedValue 的值，它只是从该值创建一个新的钳制 AnimatedValue。

对我来说最好的解决方案是能够在 Animated.decay 配置中指定边界，例如：

但是我在文档中没有看到类似的东西。实现这一目标的最佳方法是什么？

谢谢！

我注意到当我使用 react-native panResponder onPanResponderMove 方法调用

但是当我尝试使用时：

该方法不调用。是否有另一种我可以使用的 javascript 语法，以便我有一个可以与 Animated.event 一起使用的函数范围

我在 react-native 中创建了一个动画，使用Animated.timing()我想在中途开始动画的地方。有没有办法在css中应用负值来延迟这样的延迟。我的示例代码如下：

所以基本上我试图让这个渲染函数实时更新值（到目前为止，它只是在动画完成后跳转到最终值）

我觉得因为这个库可以在引擎盖下动画值，那么必须有一种方法来显示正在发生的事情。或者是否有某种我可以通过样式输入的内容/价值属性？

我已经尝试自定义编写自己的 setInterval 函数，但我需要它更好地与其他动画的时间对齐，我很想访问 RN 的 Easing 库！

谢谢！

我想创建一个自定义衰减动画，当特定检查返回 true 时停止。

现在我的代码如下所示：

但我想停止动画，（或改变减速）如果 x 或 y 值

（不是速度，而是 的实际 x 或 y 值this.state.animatedXYValue : AnimatedValueXY）

变得比我们说的 500 大。

任何想法将不胜感激。

谢谢你。

我目前正在尝试在我的 react-native 应用程序上实现自动隐藏标题。多亏了这个例子，我设法做到了，但它破坏了一些东西。事实上onEndReached，当我到达列表末尾时，我的方法不再被调用。我还使用该RefreshControl组件来实现一个pull-to-refresh工作，但这AnimatedScrollView似乎干扰了经典的 ListView 功能。

我创建了一个AnimatedScrollView这样的组件：

这是我的组件的渲染：

正如我所说，我很确定AnimatedScrollView滚动功能正在覆盖ListView那些，但我不知道如何解决这个问题......

如果你们对此有提示/知道解决方法，或者甚至知道可以帮助我获得标题的库，我将不胜感激:)

对于那些现在想知道someProps代表什么的人，它们与我链接的示例完全相同。

谢谢