似乎不起作用的简单 SwiftUI 转换答案

【问题标题】：Simple SwiftUI transition that doesn't seem to be working似乎不起作用的简单 SwiftUI 转换
【发布时间】：2020-09-18 16:13:03
【问题描述】：

我一直在尝试全面了解动画和过渡如何在 SwiftUI 中工作。

我整天都在尝试不同的过渡和动画，但我想要的一个过渡不起作用。我将首先展示代码，然后解释我想要什么样的转换。

struct Test: View {
    @State private var pressed = false // Controls whether the tower is shown or not.

    var body: some View {
        VStack {
            Button(pressed ? "Press me to hide tower" : "Press me to show tower") {  // Controls truth value of the "pressed" variable above.
                withAnimation(.easeInOut(duration: 5)) {  // I've set the duration to 5 because I want to see the animation in slow-motion.
                    self.pressed.toggle()  // Toggles truth value of "pressed" from true to false or vice-versa.
                }
            }

            if pressed {  // Displays the Tower when "pressed" is true.
                Tower()  // Tower struct is provided below.
            }
        }
    }
}

这是 Tower 结构：

struct Tower: View {
    var body: some View {
        VStack {
            Text("Level 3").transition(.move(edge: .leading))
            Text("Level 2")
            Text("Level 1").transition(.move(edge: .trailing))
        }
    }
}

我想要实现的过渡非常简单 - 我希望 Level 3 从左侧飞入，Level 1 从右侧飞入，Level 2 只是淡入和淡出。但是，使用此代码，级别 1、2 和 3 都只是一起淡入淡出。 .move(edge: .trailing) 转换似乎由于某种原因不起作用。

问题是我绝对希望Tower 结构和Test 结构在任何时候都是分开的。
（我不想将 Tower 结构中的任何代码复制粘贴到 Test 结构中）

如果你能告诉我如何让上层和下层从不同的方向飞入，请告诉我（如果你也能提供代码示例，那会很有帮助）。

【问题讨论】：

标签： xcode animation swiftui transition

【解决方案1】：

Transition 是一个在视图层次结构中/从视图层次结构中呈现/删除视图的引擎（如果指定了动画，则带有动画）。它直接应用于整体视图，而不是传入视图的子视图。因此，如果您尝试将视图添加到没有自己的转换的视图层次结构中，它会立即出现，如果有动画，则默认情况下会应用淡入/淡出转换（再次，将 视为一个整体 em>)。

但是您想从外部转换视图的内部结构。所以这是可能的解决方案。

用 Xcode 11.4 / iOS 13.4 测试（你可以自己玩动画）

struct Test: View {
    @State private var pressed = false

    var body: some View {
        VStack {
            Button(pressed ? "Press me to hide tower" : "Press me to show tower") {
                self.pressed.toggle()
            }

            Tower(show: $pressed)
        }.animation(.easeInOut)
    }
}

struct Tower: View {
    @Binding var show: Bool
    var body: some View {
        VStack {
            if show {
                Text("Level 3").transition(.move(edge: .leading))
                Text("Level 2")
                Text("Level 1").transition(.move(edge: .trailing))
            }
        }
        .animation(.easeInOut)
    }
}

【讨论】：