因此，如何使用react-native-reanimated动画几个元素？

Question

假设我有两个View，因此需要为其设置动画，即

1. 第一视图动画
2. 第一个视图完成动画，第二个视图设置动画

我如何使用react-native-reanimated来做到这一点？我在入门文档中发现的信息很少，那么这样做的最佳实践是什么？

Answer 1

您可以使用序列方法

from documentation

  

按顺序启动动画数组，等待每个动画完成后再开始下一个动画。如果当前正在运行的动画已停止，则不会启动以下动画。

例如

Animated.sequence([
    Animated.timing(this.animated1, {
        toValue: 100,
        duration: 500
    }),
    Animated.timing(this.animated2, {
        toValue: 0,
        duration: 200
    })
]).start()

或使用parallel感应器

  

同时开始所有动画。默认情况下，如果其中一个动画已停止，则所有动画都将停止。您可以使用stopTogether标志覆盖它。

Animated.parallel([
    Animated.timing(this.animated1, {
        toValue: 100,
        duration: 500
    }),
    Animated.timing(this.animated2, {
        toValue: 0,
        duration: 200
    })
]).start()

Answer 2

因此我需要为其设置动画

了解您要实现的目标有点复杂。 我建议

1. 克隆存储库

git clone git@github.com:software-mansion/react-native-reanimated.git

1. 运行

  yarn
  cd Example
  yarn
  cd ios && pod install && cd .. # if using IOS devices
  yarn start

您将可以访问大量示例