Delay transition of a button - swift

Question

I'm attempting to transition a button in a SwiftUI project such that, when the button is pressed, it will do a .move(edge: .trailing) and after approximately a half a second a different image for the button will come into view.
Here's what I have so far and as expected the image changes simultaneously. I'm curious if this is something that can be accomplished with asymmetric transitions. Trying to avoid using two different buttons that have animating offsets changing.
#State var delayedMove = false
#ViewBuilder
var moveMe: some View {
HStack {
Spacer()
Button(action: {
withAnimation {
delayedMove.toggle()
}
}) {
if delayedMove {
selectImageButton
.animation(.linear.delay(delayedMove ? 0 : 1))
.transition(.move(edge: .trailing))
} else {
deleteImage
.animation(.linear.delay(!delayedMove ? 0 : 1))
.transition(.move(edge: .trailing))
}
}
.padding()
}
}

Answer 1

Yes you can use asymmetric, and no need to repeat the code. But Transition in SwiftUI needs 2 things to works correctly first a Group and Second an if & else, it is how it works right now maybe in future it changes but you can see the Code:
struct ContentView: View {
#State private var toggleButton = false
var body: some View {
HStack {
Button("Toggle Button") { toggleButton.toggle() }
Spacer()
Button(action: { toggleButton.toggle() }, label: {
Group {
if toggleButton {
Image(systemName: "trash")
}
else {
Image(systemName: "plus")
}
}
.transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: .trailing), removal: AnyTransition.move(edge: .trailing)))
})
}
.padding()
.animation(Animation.linear(duration: 0.5), value: toggleButton)
}
}

Answer 2

You are quite close. I just split up the single if-else into 2 ifs, wrapped in a ZStack.
The button also makes secondaryDelay equal true for half a second, and then it switches back to false.
When the view leaves the hierarchy, that's when the transition starts. I worked out the way to do this by considering all the scenarios for the selectImageButton:
Showing - show: delayedMove = true, secondaryDelay = false
Starting to hide - hide: delayedMove = false, secondaryDelay = true
Hiding - hide: delayedMove = false, secondaryDelay = false
Starting to show - hide: delayedMove = true, secondaryDelay = true
From above, we only need to show when delayedMove && !secondaryDelay equals true. Similar method for other deleteImage.
Code:
struct ContentView: View {
#State var delayedMove = false
#State var secondaryDelay = false
var body: some View {
moveMe
}
#ViewBuilder
var moveMe: some View {
HStack {
Spacer()
Button(action: {
withAnimation {
delayedMove.toggle()
secondaryDelay = true
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
secondaryDelay = false
}
}
}) {
ZStack {
if delayedMove && !secondaryDelay {
selectImageButton
.animation(.linear)
.transition(.move(edge: .trailing))
}
if !delayedMove && !secondaryDelay {
deleteImage
.animation(.linear)
.transition(.move(edge: .trailing))
}
}
}
.padding()
}
}
}
Result:

Answer 3

You can still use the same button and have the label animated with an offset if you want a clean and smooth animation like the first image going out and the other entering. you can try this view
#State var delayedMove = false
var moveMe: some View {
HStack {
Spacer()
Button(action: {
withAnimation (.linear(duration: 0.5)){
delayedMove.toggle()
}
}) {
ZStack{
Image(systemName: "trash")
.offset(x: delayedMove ? 0 : 200)
Image(systemName: "plus")
.offset(x: delayedMove ? 200 : 0)
}
.imageScale(.large)
}
.padding()
}
}