如何通过动画将按钮偏移至初始位置？

SwiftUI里没有直接的offset(to:)方法，但可以通过结合状态变量、动画函数和坐标转换实现你要的效果，下面是具体实现思路和代码：

核心思路 #

• 获取初始位置：用GeometryReader获取顶部栏按钮的全局坐标，再转换为相对于父视图的位置。
• 控制动画状态：通过@State变量标记动画触发状态，让按钮在初始位置和屏幕中间切换。
• 实现往返动画：用withAnimation包裹状态变更，配合延迟任务完成动画后自动返回的逻辑。

完整代码示例 #

1. 重构TopBar视图，传递按钮位置和动画触发信号 #

struct TopBar: View {
    @Binding var coinButtonGlobalFrame: CGRect
    @Binding var shouldAnimate: Bool
    
    var body: some View {
        HStack {
            Spacer()
            Button(action: {
                shouldAnimate.toggle()
            }) {
                Text("999金币")
                    .padding()
                    .background(Color.yellow)
                    .cornerRadius(8)
            }
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .onAppear {
                            // 获取按钮的全局坐标
                            coinButtonGlobalFrame = proxy.frame(in: .global)
                        }
                }
            )
        }
        .padding()
        .background(Color.gray.opacity(0.2))
    }
}

2. 主视图实现动画逻辑 #

struct ContentView: View {
    @State private var coinButtonGlobalFrame = CGRect.zero
    @State private var shouldAnimate = false
    
    var body: some View {
        GeometryReader { mainProxy in
            VStack {
                TopBar(coinButtonGlobalFrame: $coinButtonGlobalFrame, shouldAnimate: $shouldAnimate)
                
                Spacer()
                
                Button("中间按钮") {
                    shouldAnimate.toggle()
                }
                .padding()
                .background(Color.blue)
                .cornerRadius(8)
            }
            .overlay(
                // 动画用的按钮副本（也可直接移动原按钮）
                Text("999金币")
                    .padding()
                    .background(Color.yellow)
                    .cornerRadius(8)
                    .opacity(shouldAnimate ? 1 : 0)
                    .position(
                        shouldAnimate ?
                        // 屏幕中间位置
                        CGPoint(x: mainProxy.size.width/2, y: mainProxy.size.height/2) :
                        // 转换为相对于主视图的初始位置
                        CGPoint(
                            x: coinButtonGlobalFrame.origin.x - mainProxy.frame(in: .global).origin.x + coinButtonGlobalFrame.width/2,
                            y: coinButtonGlobalFrame.origin.y - mainProxy.frame(in: .global).origin.y + coinButtonGlobalFrame.height/2
                        )
                    )
                    .onChange(of: shouldAnimate) { newValue in
                        if newValue {
                            // 动画结束后自动返回初始位置
                            DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
                                withAnimation {
                                    shouldAnimate = false
                                }
                            }
                        }
                    }
                    .animation(.easeInOut(duration: 0.8), value: shouldAnimate)
            )
        }
    }
}

关键细节说明 #

• 坐标转换：通过全局坐标减去主视图的全局坐标，得到按钮在主视图内的相对位置，确保偏移计算准确。
• 动画控制：用@State变量shouldAnimate驱动位置变化，搭配animation(_:value:)实现平滑过渡。
• 自动返回：利用DispatchQueue.main.asyncAfter延迟切换状态，实现动画完成后自动回到初始位置的效果。

如果不想用按钮副本，也可以直接在TopBar的按钮上添加offset修饰符，通过计算偏移量实现移动，核心逻辑一致。

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