Glitch on animation expanding view SwiftUI

Question

I have a search bar view, when the view is Expanding, the magnifying glass will appear as a shadow. How can I remove this?

ToolbarItem(placement: .automatic) {
    HStack {
        if self.showSearchBar {
            HStack {
                Image(systemName: "magnifyingglass") // I think that here is the problem, I need to add some transition, or remove it?
                
                let mytxtfield = TextField("Search in menu", text: self.$txtSearch)
                if #available(iOS 15, *) {
                    mytxtfield.submitLabel(.search)
                    
                }

                Button {
                    self.txtSearch = ""
                    UIApplication.shared.endEditing()
                    withAnimation(.spring(response: 0.30, dampingFraction: 0.3, blendDuration: 0)){
                        self.showSearchBar.toggle()
                    }
                    
                } label: {
                    Image(systemName: "xmark")
                }
            }
            .padding(self.showSearchBar ? 10 : 0)
            .background(colorScheme == .dark ? Color(.secondarySystemBackground) : Color.white)
            .cornerRadius(20)
            .frame(width: 320, height: 45)
            .transition(.move(edge: .trailing))
            
        } else {
            Button {
                withAnimation(.spring(response: 0.45, dampingFraction: 0.60, blendDuration: 0)){
                    self.showSearchBar.toggle()
                }
            } label: {
                Image(systemName: "magnifyingglass") // the problem is here///// this image gets to the left somehow when the animation happens
            }
            .transition(.move(edge: .trailing))
        }
    }
}

I uploaded the video of the animation here: https://files.fm/u/mpzr7zytn

The photo of the glitch: https://files.fm/u/sndev9jzc

Somehow the magnifying glass appears first.

Mojtaba Hosseini · Accepted Answer · 2023-03-13T08:51:11.997

Because you are using two different magnifiers.

For better understanding, take a look at this demo of your code with different colors and environments:

Try to change your login in a way that uses each component once and just move it around instead of removing and adding another one or you may face a hard situation synchronizing all animations!

for example:

NavigationView {
    VStack {
        HStack {
            Spacer()
            Button {
                withAnimation(.spring(response: 0.45, dampingFraction: 0.60, blendDuration: 0)){
                    self.showSearchBar.toggle()
                }
            } label: {
                Image(systemName: "magnifyingglass")
            }

            if showSearchBar {
                HStack {
                    TextField("Search", text: $txtSearch)
                    Button {
                        withAnimation(.spring(response: 0.45, dampingFraction: 0.60, blendDuration: 0)) {
                            self.showSearchBar.toggle()
                        }
                    } label: {
                        Image(systemName: "xmark")
                    }
                }
                .transition(.move(edge: .trailing))
            }
        }
        .transition(.move(edge: .trailing))
        Spacer()
    }
}

Note 1: I have simplified the code and made it ready for copy-paste.

Note 2: You should use FocusState instead of endEditing

Note 3: You may want to try using imgur for media files inside the StackOverflow.

Please check my code, I have a button x that reverts the animation. That is the reason why I use 2 animations, and 2 toggles. I expand the text field with one button, and I collapse it back with another. — dhaval123, Mar 12 '23 at 23:36
where is the image for "xmark"., again, I have to use 2 buttons — dhaval123, Mar 13 '23 at 08:12
I have added the other button but you should consider solving unrelated issues yourself my friend ;) — Mojtaba Hosseini, Mar 13 '23 at 08:51
Wouldn't using 2 animations affect the transition scope? Also I am new at SwiftUI, I am a desktop developer, I appreciate your help anyway — dhaval123, Mar 13 '23 at 09:03

Glitch on animation expanding view SwiftUI

1 Answers1