Bagaimana cara menganimasikan peralihan dari satu teks ke teks lainnya dengan ui cepat?

Question

Saya memiliki serangkaian string. Sebagai contoh["Car", "Boat", "Van"]

Bagaimana cara menganimasikan perubahan teks dalam larik (yang dapat berisi lebih banyak string) sehingga ia beralih dari Carke Boatke Vandengan mengaburkan transisi? Dan agar terus mengulang ini?

Saya sudah memiliki ide tentang cara membuat animasi, tetapi saya terjebak dalam mengganti teks. Saya telah mengajukan pertanyaan tentang mengapa teks tidak beralih di sini -> Mengapa ukuran beranimasi dan bukan teks dengan tampilan SwiftUI ini?

Tapi saya pikir Mungkin lebih baik untuk menulis pertanyaan terpisah tentang bagaimana sebenarnya mengganti teks.

Answer 1

Berikut adalah solusi yang mungkin menganimasikan teks berdasarkan larik. Saya telah menggunakan ide transisi Asperis dari solusi ini di sini

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

Saya sudah memilih jawaban @davidev. Tetapi berdasarkan jawabannya inilah yang telah saya terapkan. Cheers 🍺

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
                }
            }
        }
    }
}