React native 如何在React Native中前后播放交错动画?
我在React native 如何在React Native中前后播放交错动画?,react-native,react-native-android,react-native-ios,React Native,React Native Android,React Native Ios,我在React Native中有一组动画,当用户单击按钮时播放,但在第二次单击中,我希望向后播放stagger动画 这是我的密码 const mode = useMemo(() => new Animated.Value(0)); const bottom = useMemo(() => new Animated.Value(0)); const saleOpacityAnim = useMemo(() => new Animated.Value
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],
});
有什么道具可以这样做吗?否则怎么办