如何使用swift ui动画从一个文本切换到另一个文本？答案

【问题标题】：How to animate switching from one Text to another with swift ui?如何使用swift ui动画从一个文本切换到另一个文本？
【发布时间】：2020-12-14 00:30:01
【问题描述】：

我有一个字符串数组。例如["Car", "Boat", "Van"]

如何动画更改数组中的文本（可以包含更多字符串），以便通过模糊过渡从Car 切换到Boat 到Van？让它不断循环这个？

我已经对如何制作动画有了想法，但我一直在切换文本。我已经问过为什么这里的文字没有切换的问题-> Why does the size animate and not the text with this SwiftUI view?

但我认为最好单独写一个关于如何实际切换文本的问题。

【问题讨论】：

这个问题需要更多关注吗？我看到投票关闭它？ ??????

标签： swiftui

【解决方案1】：

这是一个基于数组动画文本的可能解决方案。我已经从这个解决方案中使用了 Asperis 过渡理念here

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

【讨论】：

【解决方案2】：

我已经选择了@davidev 答案。但根据他的回答，这就是我已经实施的。干杯?

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

【讨论】：