在 "none" 和 "flex" 之间切换显示样式属性，使用 Act-Native 的动画

Question

如何使用动画值在不显示和伸缩之间切换?我尝试插值到0和1，并根据值改变显示属性。

我正在尝试隐藏动画。当动画值达到90但没有发生任何事情时查看。

// change animated value from 0 to 180
const flip = () => {
Animated.timing(flipAnimation, {
toValue: 180,
duration: 300,
useNativeDriver: true,
}).start();
};
//if the animated value is between 0 and 90 it will return 0 else it will return 1
const interpolate = flipAnimation.interpolate({
inputRange: [0, 90, 91, 180],
outputRange: [0, 0, 1, 1],
})

//if the value is 1 set display to "none" else set it to "flex"
<Animated.view style={{
display: interpolate === 1 ? "none" : "flex"
}}/>

Answer 1

这就是我的需求，我放弃了尝试使它与动画工作，只是使用reanimated:

const hideFrontStyle = useAnimatedStyle(() => {
return {
display: flipAnimation.value >= 90 ? "flex" : "none",
};
});