[英]How to animate transition between views in SwiftUI?
我有以下看法。
import SwiftUI
struct AppView: View {
@EnvironmentObject var appStore: AppStore
var body: some View {
ZStack {
Color.blue
if .game == self.appStore.appMode {
GameView()
} else if .options == self.appStore.appMode {
OptionsView()
} else {
MenuView()
}
}
}
}
我想为子视图之间的切换设置动画。 我见过一些使用状态作为一个开关的例子,但我依赖的不止一个。 我还尝试使用onAppear
和onDisappear
在子视图中应用动画。 这有效,但是当视图未显示时, onDisappear
不再执行。 此外,我想让它适用于所有视图。
有没有办法在不使用多个状态的情况下做到这一点? 我喜欢只使用.transition
和.animation
。
现在我最好的解决方案是这个。
import SwiftUI
struct AppView: View {
@EnvironmentObject var appStore: AppStore
var body: some View {
ZStack {
Color.blue
if .game == self.appStore.appMode {
GameView()
.transition(.scale)
.zIndex(1) // to keep the views on top, however this needs to be changed when the active child view changes.
} else if .options == self.appStore.appMode {
OptionsView()
.transition(.scale)
.zIndex(2)
} else {
MenuView()
.transition(.scale)
.zIndex(3)
}
}
}
}
并且在每个视图转换器上。
.onTapGesture {
withAnimation(.easeInOut(duration: 2)) {
self.appStore.appMode = .game
}
}
使用以下方法,您可以根据需要修改您的appMode
(onAppear、onTapGesture 等)。 动画持续时间当然可以任意设置(以及过渡类型,实际上,但是某些过渡在预览中表现不佳,应该在模拟器或真实设备上进行测试)。
演示:(第一次闪烁只是预览启动,然后是 onAppear 的两个过渡,然后是 onTap)
使用 Xcode 11.4 / iOS 13.4 进行测试 - 可以在预览版和模拟器中使用。
代码:重要部分标有内联注释。
var body: some View {
ZStack {
// !! to keep background deepest, `cause it affects removing transition
Color.blue.zIndex(-1)
// !! keep any view in explicit own `if` (don't use `else`)
if .game == self.appStore.appMode {
GameView()
.transition(AnyTransition.scale.animation(.easeInOut(duration: 1)))
}
if .options == self.appStore.appMode {
OptionsView()
.transition(AnyTransition.scale.animation(.easeInOut(duration: 1)))
}
if .menu == self.appStore.appMode {
MenuView()
.transition(AnyTransition.scale.animation(.easeInOut(duration: 1)))
}
}
}
更新:对于.slide
(可能还有其他移动转换),状态的变化应该被包装成显式withAnimation
,如下所示
withAnimation {
self.appStore.appMode = new_mode_here
}
注意:这些是预览不支持的过渡之一 - 在模拟器中测试。
过渡示例
...
if .menu == self.appStore.appMode {
Text("MenuView").frame(width: 300, height: 100).background(Color.red)
.transition(AnyTransition.move(edge: .bottom).combined(with: .opacity).animation(.easeInOut(duration: 1)))
}
}
.onTapGesture {
withAnimation {
let next = self.appStore.appMode.rawValue + 1
self.appStore.appMode = next > 2 ? .game : AppStore.AppMode(rawValue: next)!
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.