如何在react-native-reanimated 2中制作系列/并行动画？

Question

我正在寻找react-native 的等价Animated.sequence物Animated.parallel。到目前为止，从v2 的文档来看，我只能看到仅withSequence更改 on value 的值的函数，因此仅更改系列中一个组件的样式。

我正在寻找的是在两个不同的组件中触发动画，无论是串联还是并行。对于并行，似乎一个接一个地改变语句中的值是有效的。如我错了请纠正我。

  // these will run in parallel
  val1Shared.value = withTiming(50);
  val2Shared.value = withTiming(100);

但对于系列，我需要将每个动画放在 useTiming 回调中。这会导致某种回调地狱。

  val1Shared.value = withTiming(50, undefined, () => {
    val2Shared.value = withTiming(100);
  });

请帮助使用 reanimated 2 实现这一目标的最佳实践。谢谢。

Answer 1

我认为没有办法像动画那样做到这一点。

这个图书馆需要你以不同的方式思考。如果您希望使用插值运行两个动画（每个动画用于一个单独的视图），则可以使用单个共享值和足够的插值配置。

让我们假设（根据您的示例）您有两个想要设置动画的视图。第一个动画是从 0 到 50，第二个动画是从 0 到 100。

我们还假设您正在变换 X 轴（我不知道您的情况是什么，但它会非常相似），并且我们将动画进度从 0 计数到 1，并且两个视图将在同一时间段内进行动画处理。

初始化共享值：

const animation = useSharedValue(0);

并像这样（您选择的）做某事：

animated.value = withTiming(1, { duration, easing });

对于第一个视图，您的转换将如下所示：

const animatedStyles1 = useAnimatedStyle(
() => ({
  transform: [
    {
      translateX: interpolate(animation.value, [0, 0.5, 1], [0, 50, 50]),
    },
  ],
}),
[mode, rectSize]);

对于第二个，像这样：

const animatedStyles2 = useAnimatedStyle(
() => ({
  transform: [
    {
      translateX: interpolate(animation.value, [0, 0.5, 1], [0, 0, 100]),
    },
  ],
}),
[mode, rectSize]);

现在解释一下。

对于第一个视图，我们只处理整个动画进度的一半，因此我们从 0 到 0.5，我们将从 0 到 50 进行动画处理。然后，为了重置进度，我们将停留在同一个位置（这称为死区），从 0.5 到 1 的进度值不会改变（50 到 50）。现在，对于第二个视图，我们等待进度减半，因此从 0 到 0.5 我们不执行任何操作（0 到 0）。然后，当进度减半时，我们将视图从 0 动画到 150。

一般来说，这样您就可以仅使用一个共享值来协调整个事情。

在这里您可以找到有关插值的更多信息。该文档来自react-native的Animated，但想法是相同的。

祝你好运！