React Native Reanimated 并行化

Question

有没有办法模拟React Native中的Animated并行效果？我想同时运行一个特定组件的多个动画。

- user13594285

---

我不理解你的问题。你能稍微澄清一下吗？为什么你想要模拟动画？ - Rasmus Knap

对于那些没有理解这个问题的人，我在这里给出一点澄清。他想要使用react-native-reanimated库同时运行多个动画，而不是使用内置的Animated组件。所有对这个问题的答案都是错误的。 - 1nspir3d

@DavydVeremchuk 我也需要这样的功能。有没有可能找到一种解决办法？ - sangam4742

@1nspir3d 你知道怎么正确地做吗？ - undefined

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()
    ])

- Maksim Gridin

---

这是关于react-native-reanimated的正确答案。 - Gaurav Roy

Answer 2

是的，你可以。首先使用animated.timing或animated.spring创建你的对象。创建多个对象。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();
}

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

- Dastagir Ahmed

Answer 3

你可以使用https://reactnative.dev/docs/animated#parallel来同时运行并行动画，并且你还可以使用插值https://reactnative.dev/docs/animations#interpolation。

通过插值，你可以将一个动画的值映射到另一个动画中。如果你希望某些动画对其他动画的值作出响应，这将非常有用。通过插值，你可以在组件中创建多个动画视图（A和B）：

比如当从屏幕底部显示一个元素时，animationA，你希望另一个元素移开，animationB。

为了实现这一点，你可以从animationA创建一个变成animationB的动画。

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

animationB，现在做的是animationA的相反。

- Rasmus Knap