在动画偏移时动画删除/添加 SwiftUI 视图

Posted 2023-02-24

【中文标题】在动画偏移时动画删除/添加 SwiftUI 视图

【英文标题】：Animate removing/adding SwiftUI view while animating offset

【发布时间】：2020-07-03 14:51:10

【问题描述】：

我正在尝试为 SwiftUI 视图的偏移设置动画，同时淡出并删除该视图的子视图。我遇到的问题是 SwiftUI 执行偏移和淡出动画，但没有组合它们。

我想要实现的动画整个SubView的位置，同时淡出字幕文本，使字幕文本在淡入或淡出时垂直移动。我可以通过动画Text 的不透明度而不是删除它来实现这一点，但这意味着文本仍将占用“布局空间”。

有没有办法用if showSubtitle 语句来实现这个动画？

以下代码和 GIF 演示了该问题：

struct ContentView: View 
    @State private var showSubtitle = true
    var body: some View 
        SubView(showSubtitle: showSubtitle)
            .animation(.default)
            .offset(y: showSubtitle ? 100 : 0)
            .onTapGesture 
                self.showSubtitle.toggle()
            
    


struct SubView: View 
    let showSubtitle: Bool
    var body: some View 
        VStack 
            Text("Header")
            if showSubtitle 
                Text("Subtitle")
            
        
    

【问题讨论】：

您是否尝试过将showSubtitle 定义为Binding 而不是常量？

【参考方案1】：

实际上观察到的行为是因为.offset 不改变布局，视图站在同一个地方。因此，当您删除子视图时，它会被 就地 删除并为该删除设置动画（默认为.opacity 过渡）。开始偏移的部分已经不包含子视图，所以你在向上移动的部分看不到它。

这可能会产生您所期望的某种效果，但过渡是基于源大小的，所以它不是到目前为止和手动指定的偏移距离。无论如何，尝试：

if showSubtitle 
    Text("Subtitle")
        .transition(AnyTransition.opacity.combined(with: AnyTransition.move(edge: .top)))

使用 Xcode 12 / ios 14 测试

【讨论】：

我不认为这是因为偏移量没有改变布局。我用position 修饰符尝试了它，不幸的是结果是一样的。 transition 解决方法有点工作，但它不是我认为最可维护和最灵活的。不过感谢您的回答！