Wie animiere ich das Wechseln von einem Text zu einem anderen mit einer schnellen Benutzeroberfläche?

Question

Ich habe eine Reihe von Zeichenfolgen. Zum Beispiel["Car", "Boat", "Van"]

Wie kann ich die Änderung des Texts im Array (der mehr Zeichenfolgen enthalten kann) so animieren, dass er durch Verwischen des Übergangs von Carzu Boatnach Vanwechselt? Und damit es das immer wieder schleift?

Ich habe bereits eine Idee, wie man animiert, aber ich musste den Text wechseln. Ich habe die Frage gestellt, warum der Text hier nicht umgeschaltet wird -> Warum wird die Größe animiert und nicht der Text in dieser SwiftUI-Ansicht?

Aber ich dachte, es wäre vielleicht besser, eine separate Frage zu schreiben, wie man den Text tatsächlich wechselt.

Answer 1

Hier ist eine mögliche Lösung zum Animieren von Text basierend auf einem Array. Ich habe asperis Übergang Idee von dieser Lösung verwendet hier

struct ContentView: View {
    var array = ["First", "Second", "Third"]
    @State var shortString = true
    
    @State var currentIndex : Int = 0
    @State var firstString : String = ""
    @State var secondString : String = ""

    var body: some View {

        VStack {
            if shortString {
               Text(firstString).font(.title).fixedSize()
               .transition(AnyTransition.opacity.animation(.easeInOut(duration:1.0)))
            }
            if !shortString {
                Text(secondString).font(.title).fixedSize()
                    .transition(AnyTransition.opacity.animation(.easeInOut(duration:1.0)))
            }
        }
        .animation(.default)
        .onAppear {
            firstString = array[0]
            secondString = array[1]
            
            let timer = Timer.scheduledTimer(withTimeInterval: 2.0, repeats: true) { _ in
                if (shortString) {
                    if currentIndex == array.count - 1 {
                        self.secondString = array[0]
                        currentIndex = 0
                    }
                    else {
                        self.secondString = array[currentIndex+1]
                        currentIndex += 1
                    }
                }
                else {
                    if currentIndex == array.count - 1 {
                        self.firstString = array[0]
                        currentIndex = 0
                    }
                    else {
                        self.firstString = array[currentIndex+1]
                        currentIndex += 1
                    }
                }
                shortString.toggle()
            }
        }
    }
}

Answer 2

Ich habe bereits @davidev Antwort ausgewählt. Aber basierend auf seiner Antwort habe ich dies umgesetzt. Prost 🍺

struct ContentView: View {
    var array = ["First", "Second", "Third"]
    @State var currentIndex : Int = 0
    @State var firstString : String = ""
    @State var timer: Timer? = nil
    @State var isBlurred = false
    
    var body: some View {
        VStack {
            Text(firstString).blur(radius: isBlurred ? 6 : 0)
        }.onAppear {
            self.timer = newTimer
        }
    }
    
    var newTimer: Timer {
        Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { v in
            let rndTime = [0.5, 0.3, 0.7, 1.0].randomElement()! // I wanted a random time up to 1 second.
            v.invalidate()
            currentIndex += 1
            if currentIndex == array.count { currentIndex = 0 }
            DispatchQueue.main.asyncAfter(deadline: .now() + rndTime) {
                self.isBlurred.toggle()
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                    self.isBlurred.toggle()
                    firstString = array[currentIndex]
                    self.timer = newTimer
                }
            }
        }
    }
}