react-native - 如何在 React Native 中前后播放交错动画？

Question

我有一组动画在React Native用户单击按钮时播放，但在第二次单击时我想stagger向后播放动画。

这是我的代码

const mode = useMemo(() => new Animated.Value(0));
        const bottom = useMemo(() => new Animated.Value(0));
        const saleOpacityAnim = useMemo(() => new Animated.Value(0));
        const sizeSale = useMemo(() => new Animated.Value(0));
        const opacityText = useMemo(() => new Animated.Value(0));
        const onAddPress = () => {
              Animated.stagger(100, [
                 Animated.timing(bottom, {
                    toValue: bottom._value === 0 ? 1 : 0,
                    useNativeDriver: false
                 }),
                 Animated.timing(mode, {
                    toValue: mode._value === 0 ? 1 : 0,
                    useNativeDriver: false,
                    speed: 1
                 }),
                 Animated.timing(sizeSale, {
                    toValue: sizeSale._value === 0 ? 1 : 0,
                    useNativeDriver: false,
                 }),
                 Animated.timing(saleOpacityAnim, {
                    toValue: saleOpacityAnim._value === 0 ? 1 : 0,
                    useNativeDriver: false,
                    delay: 150,
                    duration: 300
                 }),
                 Animated.timing(opacityText, {
                    toValue: opacityText._value === 0 ? 1 : 0,
                    useNativeDriver: false,
                 }),
              ]).start()
        }
        const viewWidth = mode.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 150],
        });
        const viewHeight = mode.interpolate({
           inputRange: [0, 1],
           outputRange: [0, styles.animationHeight.height],
        });

        const saleWidth = sizeSale.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 150],
        });
        const saleHeight = sizeSale.interpolate({
           inputRange: [0, 1],
           outputRange: [0, styles.animationHeight.height],
        });
        const viewOpacity = bottom.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 1],
        });
        const saleOpacity = saleOpacityAnim.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 1],
        });
        const adoptBottom = bottom.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 62],
        });
        const saleBottom = bottom.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 124],
        });
        const textOpacity = opacityText.interpolate({
           inputRange: [0, 1],
           outputRange: [0, 1],
        });

有没有道具可以做到这一点？否则怎么办？

标签： react-nativereact-native-androidreact-native-ios