Right here is the view, which has an "Type Button" and "Cancel" Button on trailing fringe of an textfield. When it’s centered, I would like it to animate the buttons ("Type Button" and "Cancel") transferring out and in.
struct TextFieldFocusAnimation: View {
@FocusState personal var isFocused: Bool
var physique: some View {
HStack {
TextField("", textual content: .fixed(""))
.centered($isFocused)
.border(.purple)
if !isFocused {
Button("Type Button") {
print("Type clicked")
}
.transition(.transfer(edge: .main))
} else {
Button("Cancel") {
isFocused = false
}
.transition(.transfer(edge: .trailing))
}
}
.padding()
.transformEffect(.identification) // That is to isolate the geometry
.animation(.snappy, worth: isFocused)
}
}
The ensuing animation seems to be like this:
Be aware, how the buttons are popping in, as a substitute of sliding.
I can inform the transitions do usually behave when coded like this too:
Right here, I used @State.
struct NormalPopInAnimation: View {
@State personal var isFocused: Bool = false
var physique: some View {
VStack {
HStack {
TextField("", textual content: .fixed(""))
.border(.purple)
if !isFocused {
Button("Type Button") {
print("Type clicked")
}
.transition(.transfer(edge: .main))
} else {
Button("Cancel") {
isFocused = false
}
.transition(.transfer(edge: .trailing))
}
}
.padding()
.transformEffect(.identification)
Button("Toggle") {
isFocused.toggle()
}
}
.animation(.snappy, worth: isFocused)
.body(maxWidth: .infinity, maxHeight: .infinity)
.ignoresSafeArea()
}
}
I’ve already regarded into Animating modifications to @FocusState SwiftUI , I’m in search of the way to repair this with out having to introduce one other state or not less than know the explanation why this does not work the best way I feel it ought to.
