按钮选择指示器动画

在 SwiftUI 中，按钮选择指示器动画是一个非常实用的示例，能够帮助你理解如何使用 matchedGeometryEffect 来实现流畅的视图过渡。通过这个示例，你将学习如何创建一个简单而有效的动画效果，使用户在选择不同按钮时能够感受到视觉上的连贯性。

创建按钮视图

首先，你需要创建一个包含多个按钮的视图。每个按钮都将代表一个选项，并且在用户点击时会触发动画。以下是一个简单的按钮视图示例：

struct ButtonSelectionView: View {
    @Namespace private var animationNamespace
    @State private var selectedButton: String = "按钮1"

    var body: some View {
        VStack {
            HStack {
                Button("按钮1") {
                    withAnimation {
                        selectedButton = "按钮1"
                    }
                }
                .matchedGeometryEffect(id: "button", in: animationNamespace)
                
                Button("按钮2") {
                    withAnimation {
                        selectedButton = "按钮2"
                    }
                }
                .matchedGeometryEffect(id: "button", in: animationNamespace)
            }
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(10)
            
            // 选择指示器
            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 5)
                .matchedGeometryEffect(id: "indicator", in: animationNamespace)
                .offset(x: selectedButton == "按钮1" ? -50 : 50)
        }
    }
}

动画效果的实现

在上面的代码中，matchedGeometryEffect 被用于按钮和指示器。通过为按钮和指示器指定相同的 id，SwiftUI 能够在视图之间创建平滑的过渡效果。当用户点击不同的按钮时，指示器会在按钮之间移动，给人一种流畅的体验。

触发动画

使用 @State 属性来管理当前选中的按钮。当用户点击按钮时，selectedButton 的值会更新，并且通过 withAnimation 包裹的代码块会触发动画。这种方式确保了动画的流畅性和自然感。

视觉效果的增强

为了增强视觉效果，可以为按钮添加一些样式，例如改变背景颜色或添加阴影。这样可以使按钮在被选中时更加突出，提升用户体验。

Button("按钮1") {
    withAnimation {
        selectedButton = "按钮1"
    }
}
.buttonStyle(PlainButtonStyle())
.padding()
.background(selectedButton == "按钮1" ? Color.blue : Color.clear)
.cornerRadius(10)

通过以上步骤，你可以轻松实现一个按钮选择指示器动画。这个示例不仅展示了 matchedGeometryEffect 的强大功能，还为你提供了一个良好的基础，帮助你在 SwiftUI 中创建更复杂的动画效果。🎉