SwiftUI transition offset

Question

I have a circle which has an offset. The circle appears with a scale animation when I press a button. The problem is that the animation does not start at the offset position of the circle, it starts at it's original position. How do i get the animation to start at the offset position of the circle.

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

Answer 1

Use alignment guides:

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()
        }
    }
}

You can learn more about alignment guides here. As @Asperi mentioned, the .offset modifier does not change position of view. The view is still at (0,0), so the transition happens at the origin point. If you want to "physically" offset the view then you should use alignment guides.

Hope this helps.

Answer 2

Just add animation to transition, like below (tested with 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)
            }
        }
    }
}