SwiftUI中代码滚动时自定义动画不生效问题求助

问题根源 #

SwiftUI 原生的 scrollTo 方法对 withAnimation 的自定义参数（动画类型、时长、延迟）支持有限，尤其是在搭配 ScrollReader 和 onChange 时，系统会强制使用默认滚动动画，完全忽略你传入的动画配置。

解决方案 #

方案1：iOS17+ 优先使用 scrollPosition 绑定（最简方案）

从iOS17开始，SwiftUI提供了scrollPosition绑定API，相比scrollTo更能遵循withAnimation的自定义配置：

struct YourView: View {
    @State private var scrollTargetId: String?

    var body: some View {
        ScrollView {
            // 你的滚动内容，给目标视图设置id
            VStack(spacing: 30) {
                ForEach(0..<50) { idx in
                    Text("列表项 \(idx)")
                        .id("\(idx)")
                }
                Text("需要滚动到的目标文本")
                    .id("text")
            }
        }
        // 绑定滚动位置
        .scrollPosition(id: $scrollTargetId)
        .onChange(of: 你的触发条件) { _ in
            // 用自定义动画驱动滚动
            withAnimation(.easeInOut(duration: 2).delay(2.5)) {
                scrollTargetId = "text"
            }
        }
    }
}

方案2：兼容iOS16及以下，UIKit桥接自定义滚动（完全可控）

通过包装UIKit的UIScrollView，手动控制滚动动画的所有参数，彻底绕过SwiftUI的限制：

import SwiftUI

// 自定义可动画的ScrollView
struct CustomAnimatableScrollView<Content: View>: UIViewRepresentable {
    var content: Content
    @Binding var targetId: String?
    @Binding var animationConfig: Animation?

    init(targetId: Binding<String?>, animationConfig: Binding<Animation?>, @ViewBuilder content: () -> Content) {
        self._targetId = targetId
        self._animationConfig = animationConfig
        self.content = content()
    }

    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.showsVerticalScrollIndicator = true

        // 将SwiftUI内容包装为UIKit视图
        let hostingVC = UIHostingController(rootView: content)
        hostingVC.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(hostingVC.view)

        // 约束配置
        NSLayoutConstraint.activate([
            hostingVC.view.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostingVC.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            hostingVC.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            hostingVC.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostingVC.view.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])

        context.coordinator.scrollView = scrollView
        context.coordinator.hostingVC = hostingVC
        return scrollView
    }

    func updateUIView(_ uiView: UIScrollView, context: Context) {
        guard let targetId = targetId, let animation = animationConfig else { return }

        // 查找目标视图
        guard let targetView = context.coordinator.findView(withId: targetId),
              let targetFrame = targetView.superview?.convert(targetView.frame, to: uiView) else {
            return
        }

        // 计算滚动偏移量
        let targetOffsetY = targetFrame.minY - uiView.contentInset.top

        // 使用UIKit动画完全自定义参数
        UIView.animate(
            withDuration: animation.duration ?? 0.3,
            delay: animation.delay ?? 0,
            options: animation.uiKitOptions
        ) {
            uiView.setContentOffset(CGPoint(x: 0, y: targetOffsetY), animated: false)
        } completion: { _ in
            // 重置状态避免重复触发
            self.targetId = nil
            self.animationConfig = nil
        }
    }

    func makeCoordinator() -> Coordinator { Coordinator() }

    class Coordinator {
        var scrollView: UIScrollView?
        var hostingVC: UIHostingController<Content>?

        // 递归查找带指定id的视图（通过accessibilityIdentifier标记）
        func findView(withId id: String) -> UIView? {
            guard let rootView = hostingVC?.view else { return nil }
            if rootView.accessibilityIdentifier == id { return rootView }
            for subview in rootView.subviews {
                if let found = findView(withId: id, in: subview) {
                    return found
                }
            }
            return nil
        }

        private func findView(withId id: String, in view: UIView) -> UIView? {
            if view.accessibilityIdentifier == id { return view }
            for subview in view.subviews {
                if let found = findView(withId: id, in: subview) {
                    return found
                }
            }
            return nil
        }
    }
}

// 给SwiftUI Animation扩展UIKit对应的配置参数
extension Animation {
    var duration: TimeInterval? {
        switch self {
        case let .easeInOut(dur): return dur
        case let .easeIn(dur): return dur
        case let .easeOut(dur): return dur
        case let .linear(dur): return dur
        default: return nil
        }
    }

    var delay: TimeInterval? {
        if case let .delay(del, anim) = self {
            return del + (anim.delay ?? 0)
        }
        return nil
    }

    var uiKitOptions: UIView.AnimationOptions {
        switch self {
        case .easeInOut: return .curveEaseInOut
        case .easeIn: return .curveEaseIn
        case .easeOut: return .curveEaseOut
        case .linear: return .curveLinear
        default: return []
        }
    }
}

// 使用示例
struct YourView: View {
    @State private var scrollTargetId: String?
    @State private var scrollAnimation: Animation?

    var body: some View {
        CustomAnimatableScrollView(
            targetId: $scrollTargetId,
            animationConfig: $scrollAnimation
        ) {
            VStack(spacing: 30) {
                ForEach(0..<50) { idx in
                    Text("列表项 \(idx)")
                        .accessibilityIdentifier("\(idx)")
                }
                Text("需要滚动到的目标文本")
                    .accessibilityIdentifier("text")
            }
        }
        .onChange(of: 你的触发条件) { _ in
            scrollAnimation = .easeInOut(duration: 2).delay(2.5)
            scrollTargetId = "text"
        }
    }
}

内容的提问来源于stack exchange，提问作者Nikolomoec