自定义过渡效果(.transition)

过渡效果是让你的 SwiftUI 应用更具吸引力的关键！🎉 它们能让视图的出现和消失变得流畅自然，给用户带来更好的体验。让我们一起探索如何使用 .transition 来创建令人惊艳的自定义过渡效果吧！

基础过渡效果

SwiftUI 提供了许多内置的过渡效果，例如：

• .opacity：淡入淡出效果。
• .move(edge: .leading)：从左侧滑入滑出。
• .scale：缩放效果。

你可以直接将这些效果应用到视图上，例如：

if isVisible {
    Text("Hello, World!")
        .transition(.opacity)
}

这段代码会在 isVisible 变为 true 时，让文本视图淡入；变为 false 时，让文本视图淡出。是不是很简单呢？😎

自定义过渡效果

如果你想让你的应用更具个性，可以使用自定义过渡效果。你可以使用 AnyTransition.modifier 来创建自定义过渡效果。

例如，我们可以创建一个旋转并缩放的过渡效果：

struct RotateScaleModifier: ViewModifier {
    let angle: Double
    let scale: CGFloat

    func body(content: Content) -> some View {
        content
            .rotationEffect(.degrees(angle))
            .scaleEffect(scale)
    }
}

extension AnyTransition {
    static var rotateScale: AnyTransition {
        .modifier(
            active: RotateScaleModifier(angle: 180, scale: 0),
            identity: RotateScaleModifier(angle: 0, scale: 1)
        )
    }
}

然后，你可以像使用内置过渡效果一样使用它：

if isVisible {
    Text("Hello, World!")
        .transition(.rotateScale)
}

过渡效果的组合

你可以使用 combined(with:) 方法将多个过渡效果组合在一起，创建更复杂的动画。例如，你可以将 .opacity 和 .move(edge: .bottom) 组合在一起，创建一个从底部滑入并淡入的效果：

if isVisible {
    Text("Hello, World!")
        .transition(.move(edge: .bottom).combined(with: .opacity))
}

过渡效果的组合能让你创造出无限可能！🚀 记住，好的过渡效果能提升用户体验，让你的应用更受欢迎。快去尝试一下，打造属于你自己的独特过渡效果吧！💪