我正在尝试创建一个非常简单的过渡动画,通过点击按钮在屏幕中央显示/隐藏一条消息:
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)
}
}
}
}
根据.transition(.opacity)
动画的文档
A transition from transparent to opaque on insertion, and from opaque to transparent on removal.
当 showMessage
状态属性变为 true 时消息应该淡入,当它变为 false 时淡出。就我而言,情况并非如此。该消息以淡入淡出动画显示,但隐藏时根本没有动画。有什么想法吗?
编辑:请参阅下面从模拟器中获取的 gif 中的结果。
最佳答案
问题是当 View 在 ZStack 中来来去去时,它们的“zIndex”不会保持不变。发生的事情是,当“showMessage”从 true 变为 false 时,带有“Hello World”文本的 VStack 被放在堆栈的底部,黄色立即被绘制在它的顶部。它实际上正在淡出,但它是在黄色后面淡出的,所以您看不到它。
要修复它,您需要为堆栈中的每个 View 明确指定“zIndex”,以便它们始终保持不变 - 如下所示:
struct ContentView: View {
@State private var showMessage = false
var body: some View {
ZStack {
Color.yellow.zIndex(0)
VStack {
Spacer()
Button(action: {
withAnimation(.easeOut(duration: 3)) {
self.showMessage.toggle()
}
}) {
Text("SHOW MESSAGE")
}
}.zIndex(1)
if showMessage {
Text("HELLO WORLD!")
.transition(.opacity)
.zIndex(2)
}
}
}
}
关于ios - 过渡动画在 SwiftUI 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57730074/