如何根据ScrollView的滚动量为其外部视图添加动画效果？

嘿，我刚好也碰到过类似的需求！scrollTransition确实不是干这个的，它更适合做列表项进出视口的过渡动画。要实现根据滚动量给外部Header加动画，我们可以用PreferenceKey来跟踪ScrollView的滚动偏移，具体步骤如下：

第一步：定义PreferenceKey传递滚动偏移 #

我们需要一个自定义的PreferenceKey，用来把ScrollView内部的滚动位置传递给外部的状态变量：

struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

第二步：在ScrollView内添加滚动监听 #

在ScrollView的最顶部放一个不占空间的GeometryReader，它会实时监听内容的位置变化，并把偏移量通过PreferenceKey传出去：

ScrollView {
    // 这个透明视图用来监听滚动位置，不占用布局空间
    GeometryReader { proxy in
        Color.clear
            .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scrollView")).minY)
    }
    .frame(height: 0)
    
    // 你的自定义内容视图
    CustomContentView()
}
.coordinateSpace(name: "scrollView") // 给ScrollView设置统一坐标空间，确保偏移计算准确

第三步：获取滚动偏移并更新状态 #

给ScrollView加上onPreferenceChange回调，把获取到的偏移量存到状态变量里：

@State private var scrollOffset: CGFloat = 0

// ...

ScrollView {
    // 上面的内容
}
.onPreferenceChange(ScrollOffsetKey.self) { newValue in
    scrollOffset = newValue
}

第四步：给Header应用动画效果 #

现在就可以根据scrollOffset给CustomHeaderView加动画了，比如缩放效果：

CustomHeaderView()
    // 这里的100是可调整的阈值，根据你想要的缩放幅度修改
    .scaleEffect(1 - max(0, scrollOffset) / 100)
    // 添加上平滑过渡动画
    .animation(.easeInOut(duration: 0.3), value: scrollOffset)

完整代码示例 #

把这些部分整合起来，就是一个可运行的完整示例：

struct ContentView: View {
    @State private var scrollOffset: CGFloat = 0
    
    struct ScrollOffsetKey: PreferenceKey {
        static var defaultValue: CGFloat = 0
        static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
            value = nextValue()
        }
    }
    
    var body: some View {
        ZStack {
            CustomHeaderView()
                .scaleEffect(1 - max(0, scrollOffset) / 100)
                .animation(.easeInOut(duration: 0.3), value: scrollOffset)
            
            ScrollView {
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scrollView")).minY)
                }
                .frame(height: 0)
                
                CustomContentView()
            }
            .coordinateSpace(name: "scrollView")
            .onPreferenceChange(ScrollOffsetKey.self) { newValue in
                scrollOffset = newValue
            }
            
            CustomFooterView()
        }
    }
}

// 下面是示例视图，你可以替换成自己的自定义视图
struct CustomHeaderView: View {
    var body: some View {
        Text("我的头部")
            .font(.largeTitle)
            .fontWeight(.bold)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .padding(.top, 20)
    }
}

struct CustomContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            ForEach(1...20, id: \.self) { index in
                Text("列表项 \(index)")
                    .padding()
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

struct CustomFooterView: View {
    var body: some View {
        Text("我的底部")
            .font(.title)
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
            .padding(.bottom, 20)
            .frame(maxHeight: .infinity, alignment: .bottom)
    }
}

小提示 #

• max(0, scrollOffset)是为了处理下拉ScrollView的情况，此时偏移量会变成负数，我们只关心向上滚动时的变化。
• 你可以把scaleEffect换成其他动画，比如opacity、offset，或者组合多个效果，完全根据需求调整。

备注：内容来源于stack exchange，提问作者Ilja