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 配置来禁用该方向上的过渡效果。
