swiftswiftuiswiftui-tabviewswiftui-animationswiftui-transition

Glitch on animation expanding view SwiftUI


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.


Solution

  • Because you are using two different magnifiers.

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

    Demo

    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.