React-父组件和子组件的本机并行动画

我有一个平行动画，如下。

Animated.parallel(
[
    Animated.timing(this.translateAnimatedValue, {
        toValue: 100,
        duration: 500,
        useNativeDriver: Platform.OS == 'android'
    }),
    Animated.timing(this.opacityAnimatedValue, {
        toValue: 1,
        duration: 500,
        useNativeDriver: Platform.OS == 'android'
    })
])
.start();

它适用于我的组件。

return (
    <Animated.View style={{ opacity: this.opacityAnimatedValue, transform: [{ translateY: this.translateAnimatedValue }] }}>
        <View>
            {children}
        </View>
    </Animated.View>
);

但我不希望父组件消失。只需要把孩子们藏起来。因此，当我将代码更改为以下代码时，应用程序崩溃。

return (
    <Animated.View style={{ transform: [{ translateY: this.translateAnimatedValue }] }}>
        <View style={{ opacity: this.opacityAnimatedValue }}>
            {children}
        </View>
    </Animated.View>
);

我还分离了动画并尝试了。但是，它也会使应用程序崩溃

Animated.timing(this.translateAnimatedValue, {
    toValue: 100,
    duration: 500,
    useNativeDriver: Platform.OS == 'android'
}).start();

Animated.timing(this.opacityAnimatedValue, {
    toValue: 1,
    duration: 500,
    useNativeDriver: Platform.OS == 'android'
}).start();

我想让容器进行翻译，让文本显示/消失。如何实现这一行为？

转载请注明出处:http://www.yinxuebaozhuang.com/article/20230526/1162311.html

➤