You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用MatchedGeometryEffect时文本与帧动画不同步问题求助

问题:MatchedGeometryEffect过渡中文本缩放与位置动画不同步

我使用.matchedGeometryEffect实现视图过渡时,修改了Text的字号,并通过.onAppear修饰符实现文本缩放动画——单独看缩放动画运行正常,但在过渡期间,文本移动到新位置时的动画与背景帧动画不同步,文本会超出边界,即便我在所有地方都应用了相同的默认动画。

动画演示

struct SwiftUIView: View {
    
    @Namespace var namespace
    @State var move = false
    @State var font: CGFloat = 15
    
    var body: some View {
        
        VStack {
            Button("Move") {
                withAnimation {
                    move.toggle()
                }
            }
            
            if !move {
                Text("Some Text")
                    .font(.system(size: font))
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .foregroundStyle(.blue)
                    )
                    .matchedGeometryEffect(id: "title", in: namespace)
                    .transition(.scale(scale: 1)) // 解决淡出问题
                    .frame(width: 120)
                    .onAppear {
                        withAnimation {
                            font = 15
                        }
                    }
            } 
            else {
                Text("Some Text")
                    .font(.system(size: font))
                    .padding()
                    .background(
                        RoundedRectangle(cornerRadius: 25)
                            .foregroundStyle(.blue))
                    .matchedGeometryEffect(id: "title", in: namespace)
                    .transition(.scale(scale: 1)) // 解决淡出问题
                    .offset(x: 50, y: 200)
                    .frame(width: 120)
                    .onAppear {
                        withAnimation {
                            font = 20
                        }
                    }
            }
        }
    }
}

#Preview {
    SwiftUIView()
}
  • 若不使用.matchedGeometryEffect(不切换视图),或过渡期间不调整文本大小,就不会出现该问题。
  • 我尝试过自定义可动画修饰符的方案,但该方案存在两个问题:文本行数变化时过渡无动画,且动画未完成就反转会出现异常。

更新:在实体设备(iPhone XS Max)上测试时,点击“Move”按钮,文本会先完成字号放大,之后才移动到新位置,蓝色背景矩形则正常移动。反向动画(再次点击按钮)运行正常:

实体设备演示

能否通过MatchedGeometryEffect实现文本与背景帧动画完全同步的效果?求任何指导或提示。

内容的提问来源于stack exchange,提问作者malsag

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.05 20:10:12