掌握 SwiftUI 中的 ScrollView

前言

SwiftUI 框架的第五个版本引入了许多与 ScrollView 相关的新 API，使其比以前更强大。本周将开始介绍 ScrollView 在 SwiftUI 中的新功能系列文章，首先我们将讨论滚动过渡。

scrollTransition 修饰符

全新的 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)
                    }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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)
                    }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如上例所示，我们使用 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)
                    }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

弹性动画

在这里，使用弹性动画来在过渡阶段之间进行插值。可以使用几个选项来配置过渡：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))
                    }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

还可以针对 topLeading 和 bottomTrailing 过渡使用不同的配置。在这个示例中，使用 identity 配置来禁用该方向上的过渡效果。

总结

新版的SwiftUI框架引入了scrollTransition视图修饰符，加强了ScrollView的功能。通过scrollTransition，我们可以在用户滚动内容时观察视图的过渡，从而应用透明度、缩放、旋转等视觉效果。scrollTransition的阶段包括topLeading、bottomTrailing和identity，并提供了isIdentity和value属性，用于检测和调整过渡状态。这个功能为在ScrollView中实现各种视图过渡效果提供了更多灵活性和创意空间。