React Native Reanimated 并行

Question

反正有没有模拟反应原生动画并行？ 我想同时为特定组件运行多个动画

Answer 1

使用块而不是并行：

    Animated.block([
        Animated.timing(keyboardHeight.current, {
            duration: event.duration + 100,
            toValue: event.endCoordinates.height + 10,
            easing: Easing.inOut(Easing.ease)
        }).start(),
        Animated.timing(buttonOpacity.current, {
            duration: event.duration + 100,
            toValue: 1,
            easing: Easing.inOut(Easing.ease)
        }).start()
    ])

Answer 2

您可以使用https://reactnative.dev/docs/animated#parallel并行运行动画，您可以使用插值https://reactnative.dev/docs/animations#interpolation 。

通过插值，您可以将 map 值从一个 animation 转换到另一个。 如果您希望某些动画响应其他动画的值，这很有用。 通过插值，您可以在组件（A 和 B）中创建多个动画视图：

就像从屏幕按钮显示一个元素动画A一样，您希望另一个元素移开动画B。

为了实现这一点，您从animationA创建了一个animation，它变成了animationB

const animationB = animationA.interploate({
  inputRange: [ 0, 150],
  outputRange: [150, 0]
});

动画B，现在与动画A相反。

Answer 3

是的你可以。 首先使用 animated.timing 或 animated.spring 创建您的 object。 创建许多。 Animated.spring 适合弹跳和真实世界效果。 你还需要摩擦和张力属性。 然后使用 Animated.parallel 调用对象。

 const rotateAnim=   Animated.timing(this.state.rotate,{
        toValue:1,
        duration:2000,
        useNativeDriver:true,
    })
    const borderAnim=   Animated.timing(this.state.border,{
        toValue:50,
        duration:2000,
        useNativeDriver:true,
    })
    Animated.parallel([
        fallAnim,
        rotateAnim,
        borderAnim,
    ]).start();
}

Go 到完整教程https://www.dbestech.com/tutorials/build-advanced-animations-in-react-native-with-the-native-animated-api-spring-and-timing