如何在SwiftUI的非对称转场中添加模糊淡入淡出效果？

SwiftUI确实没有内置的.blur转场，但可以通过自定义ViewModifier结合AnyTransition实现，且能与已有的透明度、偏移转场组合使用。

1. 创建模糊转场的Modifier #

先定义一个动态控制模糊程度的Modifier，用于转场过程中调整模糊值：

struct BlurTransitionModifier: ViewModifier {
    let blurRadius: CGFloat
    
    func body(content: Content) -> some View {
        content.blur(radius: blurRadius)
    }
}

2. 封装自定义模糊转场 #

基于上述Modifier，分别封装插入（模糊淡入）和移除（模糊淡出）的转场：

extension AnyTransition {
    static func blurInsertion(from initialRadius: CGFloat = 10) -> AnyTransition {
        .modifier(
            active: BlurTransitionModifier(blurRadius: initialRadius),
            identity: BlurTransitionModifier(blurRadius: 0)
        )
    }
    
    static func blurRemoval(to finalRadius: CGFloat = 10) -> AnyTransition {
        .modifier(
            active: BlurTransitionModifier(blurRadius: finalRadius),
            identity: BlurTransitionModifier(blurRadius: 0)
        )
    }
}

3. 组合所有转场效果 #

将自定义模糊转场与原有的透明度、偏移转场通过.combined(with:)组合，实现复合效果：

VStack {
    // 替换为你的视图内容
    Text("Hello, Blur Transition!")
        .font(.largeTitle)
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}
.transition(
    .asymmetric(
        insertion: .opacity
            .combined(with: .offset(x: 50))
            .combined(with: .blurInsertion()),
        removal: .opacity
            .combined(with: .offset(x: -50))
            .combined(with: .blurRemoval())
    )
)

额外说明 #

• 可调整blurInsertion和blurRemoval的参数，自定义模糊的最大半径（比如改成15增强效果）。
• 转场动画时长可通过.animation()控制，例如在触发转场的父视图上添加：.animation(.easeInOut(duration: 0.5), value: isShowing)（isShowing为控制视图显隐的布尔值）。

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