Question

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

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

我希望容器翻译并且文本显示/消失。如何实现这种行为？

Answer 1

您忘记为Animated.添加View前缀。

替换此：

 <View style={{ opacity: this.opacityAnimatedValue }}>
     {children}
 </View>

与此：

 <Animated.View style={{ opacity: this.opacityAnimatedValue }}>
     {children}
 </Animated.View>

父级和子级组件的React-Native并行动画

1 个答案: