反应原生动画视图进出

Question

目前，我正在努力出现和消失动画。 我的目标是对视图进行动画处理，然后再输入视图。但我也希望视图在动画后 100% 消失

想法

...
const visible: boolean = props.visible || false;
const [showView, setShowView] = useState<boolean>(visible);
const viewAnimation = useRef<Animatable.View & View>(null);
useEffect(() => {
const Animation = async () => {
if (visible) {
setShowView(true);
if (viewAnimation.current)
await viewAnimation.current.bounceIn(2000);
} else {
if (viewAnimation.current)
await viewAnimation.current.bounceOut(2000);
setShowView(false)
}
}
Animation();
}, [visible, viewAnimation]);
...
{showView &&
<Animatable.View ref={viewAnimation}>
...
</Animatable.View>
}
...

问题viewAnimationRef 在下一个渲染周期中设置，而不是在将 showView 设置为 true 后立即设置 ->弹跳动画永远不会被执行。因为 viewAnimation.current 为空。

我正在使用：

• 反应原生 0.62
• 反应原生动画 1.3.3

也许sb知道如何解决这个问题^^

谢谢

Answer 1

解决方案很简单，只需将 Animatable.View 包裹在普通视图周围，如果要隐藏它，请隐藏普通视图

例：

...
const visible: boolean = props.visible || false;
const [showView, setShowView] = useState<boolean>(visible);
const viewAnimation = useRef<Animatable.View & View>(null);
useEffect(() => {
const Animation = async () => {
if (visible) {
setShowView(true);
if (viewAnimation.current)
await viewAnimation.current.bounceIn(2000);
} else {
if (viewAnimation.current)
await viewAnimation.current.bounceOut(2000);
setShowView(false)
}
}
Animation();
}, [visible, viewAnimation]);
...

<Animatable.View ref={viewAnimation}>
{showView &&
<View>
...
</View>
}
</Animatable.View>

...

Answer 2

我创建了一个示例，其中翻译和不透明度发生变化，视图在屏幕内外转换

零食：https://snack.expo.io/QWWCkYS7U

export default function App() {
const value = new Animated.Value(0);
React.useEffect(() => {
Animated.sequence([
Animated.timing(value, {
toValue: 1,
duration: 1000,
easing: Easing.ease,
}),
Animated.timing(value, {
toValue: 0,
duration: 1000,
easing: Easing.ease,
})
]).start()
}, []);
const translateX = value.interpolate({
inputRange: [0, 1],
outputRange: [width, 0],
});
const opacity = value
return (
<View style={styles.container}>
<Animated.View style={[styles.view, { opacity, transform: [{ translateX }] }]} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
view: {
width: 300,
height: 100,
backgroundColor: 'red',
},
});

Answer 3

我使用3步方法使用动画库创建动画。 #1 步 - 创建要动画的值 let motion= new Animated.Value(0(;

#2 提供一种机制来动画此值，使用内置函数之一，弹簧，衰减，定时

Animated.timing(motion，{toValue：100， duration：3000}(.start((;

#3 将动画值应用于要进行动画处理的组件/对象的孔隙 在您的情况下，您想对翻译进行动画处理，因此最好的方法是 在样式上动态分配动画值，并将样式应用于组件 创建动态样式 let myStyle = { transform：[{translateX：motion}]}

将自定义样式添加到组件

有关动画的更多信息，请查看此频道： https://www.youtube.com/watch?v=DwoSyhF3CkY