SwiftUI：视图的显示和隐藏动画

SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前，您已经了解了如何使用常规if条件有条件地包含视图，这意味着当条件更改时，我们可以从视图层次结构中插入或移除视图。

转换控制插入和删除的方式，我们可以使用内置转换，以不同的方式组合它们，甚至创建完全自定义的转换。

为了演示这一点，这里有一个带有按钮和矩形的VStack：

代码语言：javascript复制

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Tap Me") {
                // do nothing
            }

            Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
        }
    }
}

我们可以让矩形只有满足一定的条件时才能出现。首先，我们添加一些可以操作的状态：

代码语言：javascript复制

@State private var isShowingRed = false

接下来，我们使用该状态作为显示矩形的条件：

代码语言：javascript复制

if isShowingRed {
    Rectangle()
        .fill(Color.red)
        .frame(width: 200, height: 200)
}

最后，我们可以在按钮的点击事件中将isShowingRed在“true”和“false”之间切换：

代码语言：javascript复制

self.isShowingRed.toggle()

如果你运行程序，你会看到按下按钮显示或者隐藏红色方块。没有动画；它只是突然出现和消失。

通过使用withAnimation（）包装状态更改，我们可以获得SwiftUI的默认视图转换，如下所示：

代码语言：javascript复制

withAnimation {
    self.isShowingRed.toggle()
}

有了这个小小的改变，应用程序现在淡入淡出红色矩形，同时向上移动按钮以腾出空间。看起来不错，但是我们可以使用transition()修饰符做得更好。

例如，我们可以通过向矩形添加transition()修饰符使其上下缩放，如图所示：

代码语言：javascript复制

Rectangle()
    .fill(Color.red)
    .frame(width: 200, height: 200)
    .transition(.scale)

现在点击按钮看起来好多了：当按钮腾出空间时，矩形会放大，当再次点击时，矩形会缩小。(PS: 直接在Canvas运行效果可能有差别，所以还是在模拟器或者真机运行查看实际效果吧)

如果你想尝试的话，你可以尝试一些其他的转换。一个有用的方法是不对称，它允许我们在显示视图时使用一个转换，在视图消失时使用另一个转换。若要尝试，请将矩形的现有过渡替换为：

代码语言：javascript复制

.transition(.asymmetric(insertion: .scale, removal: .opacity))

译自Showing and hiding views with transitions

swift ios

0 人点赞