Question

我有一个有偏移的圆。当我按下按钮时，圆圈会显示一个比例动画。问题在于动画不是从圆的偏移位置开始，而是从其原始位置开始。如何使动画从圆的偏移位置开始。

Circle()
    .frame(width: 64, height: 64)
    .foregroundColor(.red)
    .transition(.scale)
    .offset(x: -69, y: 0)

Answer 1

只需添加动画即可进行过渡，如下所示（已通过Xcode 11.4测试）

struct Test: View {
    @State private var show = false
    var body: some View {
        VStack {
            Button("Tap") {
                withAnimation {
                    self.show.toggle()
                }
            }
            if show {
                Circle()
                    .frame(width: 64, height: 64)
                    .foregroundColor(.red)
                    .transition(AnyTransition.scale.animation(.default)) // here !!
                    .offset(x: -69, y: 0)
            }
        }
    }
}

Answer 2

使用对齐指南：

struct ViewsExercise: View {
    @State var show = true

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Spacer()
            Button("Tap") {
                self.show.toggle()
            }
            .font(.title)

            if show {
                Circle()
                    .frame(width: 64, height: 64)
                    .foregroundColor(.red)
                    .alignmentGuide(.leading, computeValue: { d in
                        64
                    })
                    .transition(AnyTransition.scale.animation(.easeInOut(duration: 1)))
            }
            Spacer()
        }
    }
}

您可以了解有关对齐指南here的更多信息。如@Asperi所述，.offset修饰符不会更改视图的位置。该视图仍处于（0,0），因此过渡发生在原点。如果要“物理”偏移视图，则应使用对齐参考线。

希望这会有所帮助。

SwiftUI过渡偏移

2 个答案: