复刻Safari标签页动画：WKWebView展开/收起动画实现问题

核心问题诊断 #

当前实现存在的关键问题：

• 同时使用SwiftUI的frame调整和WKWebView的transform缩放，双重变换导致布局冲突，出现画面跳动痕迹
• matchedGeometryEffect使用场景错误（单视图状态切换无需跨视图几何共享），反而干扰动画同步
• WKWebView的变换更新未与SwiftUI动画周期绑定，过渡不同步
• 未处理网页内容的适配逻辑，小尺寸状态下内容易模糊或裁剪

优化方案 #

1. 统一变换逻辑，移除双重缩放冲突 #

放弃WKWebView内部的transform操作，完全由SwiftUI的scaleEffect控制缩放，避免布局冲突：

struct WebViewAnimationTest: View {
    @State var show = false

    var body: some View {
        ZStack {
            SimpleWebView(url: "https://google.com")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .ignoresSafeArea()
                .scaleEffect(show ? 1 : 0.5)
                .onTapGesture {
                    // 使用更贴近Safari手感的交互弹簧动画
                    withAnimation(.interactiveSpring(response: 0.3, dampingFraction: 0.8)) {
                        show.toggle()
                    }
                }
        }
    }
}

2. 优化WKWebView的内容适配 #

移除updateUIView中的变换代码，添加网页视口适配逻辑，确保缩放前后内容显示正常：

import SwiftUI
import WebKit

struct SimpleWebView: UIViewRepresentable {
    typealias UIViewType = WKWebView
    let url: String

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        // 关闭滚动视图干扰项
        webView.scrollView.bounces = false
        webView.scrollView.showsVerticalScrollIndicator = false
        webView.scrollView.showsHorizontalScrollIndicator = false
        
        if let url = URL(string: url) {
            webView.load(URLRequest(url: url))
        }
        return webView
    }

    func updateUIView(_ uiView: UIViewType, context: Context) {
        // 注入视口适配脚本，确保网页随容器尺寸调整
        let viewportScript = """
        var meta = document.createElement('meta');
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
        document.getElementsByTagName('head')[0].appendChild(meta);
        """
        uiView.evaluateJavaScript(viewportScript)
    }
}

3. 多标签页场景的无缝过渡扩展（若需实现Safari标签网格） #

如果是从标签网格切换到全屏标签，正确使用matchedGeometryEffect为每个标签分配唯一ID：

// 网格标签项
struct TabGridItem: View {
    let url: String
    let tabId: String
    @Binding var selectedTabId: String?
    @Namespace var namespace

    var body: some View {
        SimpleWebView(url: url)
            .frame(width: 200, height: 300)
            .matchedGeometryEffect(id: tabId, in: namespace)
            .onTapGesture {
                withAnimation(.interactiveSpring()) {
                    selectedTabId = tabId
                }
            }
    }
}

// 全屏标签页
struct FullScreenTabView: View {
    let url: String
    let tabId: String
    @Binding var selectedTabId: String?
    @Namespace var namespace

    var body: some View {
        SimpleWebView(url: url)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .ignoresSafeArea()
            .matchedGeometryEffect(id: tabId, in: namespace)
            .onTapGesture {
                withAnimation(.interactiveSpring()) {
                    selectedTabId = nil
                }
            }
    }
}

4. 性能优化细节 #

• 使用.interactiveSpring动画替代默认.spring()，更贴近Safari的交互手感
• 预加载网页内容，避免切换时加载延迟导致的动画断层
• 多标签场景使用LazyVGrid/LazyHGrid加载标签项，提升滚动性能

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