SwiftUI中实现带时长的文本淡入效果方案求助

对应你之前UIView扩展里的两个淡入方法，SwiftUI可以通过自定义ViewModifier实现同样的复用效果，下面是具体实现方案：

1. 自定义淡入动画Modifier #

import SwiftUI

struct FadeInModifier: ViewModifier {
    let duration: Double
    let delay: Double
    @State private var alpha: Double = 0.0
    
    func body(content: Content) -> some View {
        content
            .opacity(alpha)
            .onAppear {
                withAnimation(.easeIn(duration: duration).delay(delay)) {
                    alpha = 1.0
                }
            }
    }
}

// 给View添加扩展，和原UIView扩展用法一致
extension View {
    // 对应原fadeKey方法：时长3秒、延迟2秒、easeIn曲线
    func fadeKey() -> some View {
        self.modifier(FadeInModifier(duration: 3.0, delay: 2.0))
    }
    
    // 对应原fadeIn1方法：时长1.5秒、延迟0.5秒、easeIn曲线
    func fadeIn1() -> some View {
        self.modifier(FadeInModifier(duration: 1.5, delay: 0.5))
    }
}

2. 用法示例 #

直接给需要淡入的视图（比如文本）调用对应方法即可：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("延迟2秒，3秒完成淡入")
                .fadeKey()
            
            Text("延迟0.5秒，1.5秒完成淡入")
                .fadeIn1()
        }
        .font(.title)
    }
}

补充说明 #

• withAnimation(.easeIn(duration: duration).delay(delay))完全对应原UIView动画的时长、延迟、曲线参数
• 若要在视图出现以外的时机触发动画（比如按钮点击），可将alpha改为@Binding变量，由外部控制状态触发

内容的提问来源于stack exchange，提问作者Douglas W. Palme