SwiftUI中如何实现文本淡入完成后触发缩放退出过渡

问题描述 #

在SwiftUI视图中已实现初始显示第一个文本，几秒后第一个文本淡出、第二个文本淡入的效果。需求为：第二个文本（Text("HELLO FROM THE OTHER SIDE")）淡入完成后，延迟几秒触发自定义的TextZoomOutTransition缩放退出过渡。

修改后的完整代码 #

import SwiftUI

struct Transitions: View {
    // 修正@State变量语法：添加private修饰符并初始化默认值
    @State private var changeText = false
    @State private var zoomText = false

    private var textFadeOut: AnyTransition {
        .opacity
        .animation(.easeOut(duration: 0.3))
    }
    
    private var textFadeIn: AnyTransition {
        .opacity
        .animation(.easeIn(duration: 0.3))
    }
    
    private var textZoomOutTransition: AnyTransition {
        .asymmetric(
            insertion: .opacity,
            removal: .scale(scale: 1000, anchor: UnitPoint(x: 0.5, y: 0.45))
                .animation(.easeInOut(duration: 2.0).delay(0.1))
        )
    }
    
    public var body: some View {
        ZStack(alignment: .center) {
            Color.clear
            
            VStack(spacing: 24) {
                if !changeText {
                    Text("HELLO THERE")
                        .transition(textFadeOut)
                } else if !zoomText {
                    // 为第二个文本绑定缩放退出过渡
                    Text("HELLO FROM THE OTHER SIDE")
                        .transition(textZoomOutTransition)
                }
            }
        }
        .onAppear {
            zoomText = false
            // 1秒后切换至第二个文本（触发淡入动画）
            DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                changeText = true
            }
            // 第二个文本淡入完成后停留3.7秒（总时长5秒），触发缩放退出
            DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
                zoomText = true
            }
        }
    }
}

// 预览视图
struct Transitions_Previews: PreviewProvider {
    static var previews: some View {
        Transitions()
    }
}

关键修改说明 #

• 修正@State变量语法：原代码缺少private修饰符和默认初始化值，Swift要求@State变量必须初始化，添加private符合封装原则。
• 绑定缩放过渡到第二个文本：将第二个文本的过渡从textFadeIn替换为textZoomOutTransition，这样当zoomText变为true时，会触发该过渡的移除动画（即缩放退出效果）。
• 调整触发时机：原代码设置的5秒延迟已包含“第一个文本显示1秒→第二个文本淡入0.3秒→停留3.7秒”的逻辑，刚好满足需求；若需调整停留时长，修改第二个asyncAfter的延迟数值即可。
• 统一命名规范：将过渡变量名改为小驼峰格式（如textFadeOut），符合Swift命名习惯。

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