-0.5 C
New York
Wednesday, December 4, 2024

ios – Cannot eliminate a SwiftUI animation glitch


I am unable to eliminate an animation glitch. Right here is my code:

// Bubble.swift

import SwiftUI

struct Bubble: Identifiable {
    var id = UUID()
    var sender: Sender
    var textual content: String
    var worth: String?
    var inputType: String?
}

enum Sender {
    case consumer
    case bot
    case system
}


struct BubbleView: View {
    @State var bubble: Bubble
    @State var showBubble = false
    
    var physique: some View {
        Part {
            if self.showBubble {
                swap bubble.sender {
                    case .consumer, .bot:
                        Textual content(bubble.textual content)
                            .padding(10)
                            .foregroundColor(bubble.sender == Sender.consumer ? .white : .black)
                            .background(bubble.sender == Sender.consumer ? .accentColor : Coloration(UIColor.systemGray5))
                            .clipShape(RoundedRectangle(cornerRadius: 20))
                            .body(maxWidth: .infinity, alignment: bubble.sender == Sender.consumer ? .trailing : .main)
                            .padding(.vertical, bubble.sender == Sender.consumer ? 10 : 0)
                            .transition(.transfer(edge: .backside))
                    case .system:
                        Textual content(bubble.textual content.uppercased())
                            .padding(10)
                            .foregroundColor(.secondary)
                            .font(.caption)
                            .fontWeight(.semibold)
                            .body(maxWidth: .infinity)
                            .transition(.transfer(edge: .backside))
                }
            } else {
                Textual content("")
            }
        }.onAppear {
            withAnimation {
                self.showBubble.toggle()
            }
        }
    }
}

#Preview {
    VStack(alignment: .main) {
        BubbleView(bubble: Bubble(sender: .bot, textual content: "It is-a me, Mario!"))
        BubbleView(bubble: Bubble(sender: .consumer, textual content: "And it's-a me, Luigi!"))
        BubbleView(bubble: Bubble(sender: .system, textual content: "10:30"))
    }
}
// Dialog.swift

import SwiftUI

struct DialogView: View {
    @Binding var dialog: [Bubble]
    
    func scrollDown(proxy: ScrollViewProxy) {
        if let lastID = dialog.final?.id {
            withAnimation {
                proxy.scrollTo(lastID)
            }
        }
    }
    
    var physique: some View {
        ScrollViewReader { proxy in
            ScrollView {
                VStack(alignment: .main) {
                    ForEach(dialog) { bubble in
                        BubbleView(bubble: bubble)
                    }
                    .onChange(of: dialog.rely, preliminary: false) { _,_  in
                        scrollDown(proxy: proxy)
                    }
                }
                .body(maxHeight: .infinity)
                .padding()
                Spacer()
            }
        }
    }
}


#Preview("Dialog view") {
    DialogView(dialog: .fixed([
        Bubble(sender: .bot, text: "Bubble 1"),
        Bubble(sender: .bot, text: "Bubble 2"),
        Bubble(sender: .bot, text: "Bubble 3")
    ]))
}

It is part of a bigger challenge, however the DialogView animation is buggy: on its first look, one thing unusual occurs. To have the ability to see it, you’ll be able to simply create a brand new SwiftUI iOS challenge, and paste my code into two new information. Then, go to the Dialog.swift file and see the preview. Nothing stranges occurs on the primary time however for those who edit the DialogView physique (as an illustration commenting) you will notice the unusual animation.

It occurs continuously on my larger challenge, and I do not know learn how to take away it. It’s doable to check it on the simulator changing the ContentView.swift content material by the next:

// ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var bubbles: [Bubble] = []
    
    var physique: some View {
        DialogView(dialog: $bubbles)
        Button {
            if self.bubbles.rely == 0 {
                self.bubbles = [
                    Bubble(sender: .bot, text: "Bubble 1"),
                    Bubble(sender: .bot, text: "Bubble 2"),
                    Bubble(sender: .bot, text: "Bubble 3")
                ]
            } else {
                self.bubbles = []
            }
        } label: {
            Textual content("Check")
        }
    }
}

#Preview {
    ContentView()
}

Can somebody assist me? Thanks!

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles