SwiftUI中缩放动画过渡效果异常问题求助

问题根源 #

你代码里的核心问题是通过if和else if渲染了两个完全独立的Text实例。切换scaleEightImage状态时，旧视图执行移除动画的同时，新的Text会被插入到界面中，导致视觉上出现“残留第二个文本”的现象。另外代码里存在一处变量引用错误：按钮中调用了viewModel.scaleEightImage.toggle()，但你定义的是@State private var scaleEightImage，应该直接操作当前视图的状态变量。

修正后的完整代码 #

import SwiftUI

public struct SimpleAnimation: View {
    @State private var scaleEightImage = false
    
    private var zoomOutTransition: AnyTransition {
        .asymmetric(
            insertion: .identity,
            removal: .scale(
                scale: 1000, 
                anchor: UnitPoint(x: 0.494, y: 0.05)
            )
        )
    }
    
    public var body: some View {
        ZStack {
            Color.clear
            
            VStack {
                Spacer()
                // 只保留一个Text视图，通过状态控制其存在性
                if !scaleEightImage {
                    Text("HELLO WORLD!")
                        .foregroundColor(.black)
                        .transition(zoomOutTransition)
                }
            }
            
            VStack {
                Button {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                        withAnimation(.easeInOut(duration: 10.0).delay(0.1)) {
                            scaleEightImage.toggle()
                        }
                    }
                } label: {
                    Text("tappppp me")
                        .foregroundColor(.black)
                }
            }
        }
    }
}

关键调整说明 #

• 合并视图实例：将原本两个分支的Text合并为一个，通过if !scaleEightImage控制该视图的显示与消失，确保过渡动画作用于同一个视图的移除过程
• 统一动画设置：把动画参数从transition内部移到withAnimation中，这样动画控制更清晰，也避免过渡和全局动画的冲突
• 修正状态引用：将viewModel.scaleEightImage.toggle()改为scaleEightImage.toggle()，匹配你定义的@State变量

这样修改后，点击按钮等待2秒后，文本会按照你设置的缩放参数执行移除动画，不会再出现残留文本的问题。

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