使用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
相关产品推荐
相关产品推荐

