掌握 SwiftUI 中的 ScrollView

SwiftUI 结构的第五个版别引入了许多与 ScrollView 相关的新 API，使其比以前更强壮。本周将开端介绍 ScrollView 在 SwiftUI 中的新功能系列文章，首先咱们将评论翻滚过渡。

全新的 scrollTransition 视图修饰符答应在用户翻滚内容时观察视图的过渡。使咱们能够了解视图是否在 ScrollView 的视口中，并答应运用视觉作用，如缩放、旋转等。让咱们来看一个示例。

struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<10, id: \.self) { _ in
                Rectangle()
                    .fill(Color.random)
                    .frame(width: 300, height: 300)
                    .scrollTransition { view, transition in
                        view.opacity(transition.isIdentity ? 1 : 0.3)
                    }
            }
        }
    }
}

如上例所示，运用新的 scrollTransition 视图修饰符承受一个带有两个参数的闭包。第一个参数是没有任何作用的视图，第二个参数是 ScrollTransitionPhase 类型的实例。

ScrollTransitionPhase 类型界说了在 ScrollView 的视口中进行视图过渡的状况。ScrollTransitionPhase 类型是一个带有三个状况的枚举：topLeading、bottomTrailing 和 identity。ScrollTransitionPhase 枚举供给了 isIdentity 属性，使咱们能够检查视图是否完成了过渡。

通常情况下，在标识阶段显示视图而没有任何作用。SwiftUI 结构会在过渡期间对运用的所有更改进行动画处理。在示例中，运用了 opacity 视图修饰符来在过渡期间改变视图的透明度。

ScrollTransitionPhase 枚举还供给了另一个名为 value 的属性。取值规模是 -1 到 1，界说了过渡的数值阶段，其间 -1 表明 topLeading，1 表明 bottomTrailing。能够利用在视图从 topLeading 过渡到 bottomTrailing 时进行比例缩放等视觉作用。

struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<10, id: \.self) { _ in
                Rectangle()
                    .fill(Color.random)
                    .frame(width: 300, height: 300)
                    .scrollTransition { view, transition in
                        view.scaleEffect(transition.isIdentity ? 1 : transition.value)
                    }
            }
        }
    }
}

如上例所示，咱们运用 ScrollTransitionPhase 类型的 value 属性来在过渡阶段之间进行视图缩放。

scrollTransition 视图修饰符答应调整在插值过渡期间要运用的动画。

struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<10, id: \.self) { _ in
                Rectangle()
                    .fill(Color.random)
                    .frame(width: 300, height: 300)
                    .scrollTransition(.animated(.bouncy)) { view, transition in
                        view.scaleEffect(transition.isIdentity ? 1 : transition.value)
                    }
            }
        }
    }
}

在这里，运用弹性动画来在过渡阶段之间进行插值。能够运用几个选项来装备过渡：interactive（交互式）、animated（运用供给的特定动画）和 identity（禁用动画）。

struct ContentView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<10, id: \.self) { _ in
                Rectangle()
                    .fill(Color.random)
                    .frame(width: 300, height: 300)
                    .scrollTransition(
                        topLeading: .identity,
                        bottomTrailing: .interactive
                    ) { view, transition in
                        view.rotationEffect(.radians(transition.value))
                    }
            }
        }
    }
}

还能够针对 topLeading 和 bottomTrailing 过渡运用不同的装备。在这个示例中，运用 identity 装备来禁用该方向上的过渡作用。