我正在尝试创建一个非常简单的过渡动画,通过点击一个按钮在屏幕中央显示/隐藏一条消息:
struct ContentView: View {
@State private var showMessage = false
var body: some View {
ZStack {
Color.yellow
VStack {
Spacer()
Button(action: {
withAnimation(.easeOut(duration: 3)) {
self.showMessage.toggle()
}
}) {
Text("SHOW MESSAGE")
}
}
if showMessage {
Text("HELLO WORLD!")
.transition(.opacity)
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
根据.transition(.opacity)动画文件
插入时从不透明过渡到不透明,移除时从不透明过渡到透明。
消息应该在showMessagestate属性为true 时淡入,在state属性为false时淡出。就我而言,这是不正确的。该消息以淡入淡出的动画显示,但它完全没有动画隐藏。有任何想法吗?
编辑:请参阅下面的gif从模拟器中获取的结果。