SwiftUI/Xcode/macOS 時間が経つと内容が切り替わるTextで、切り替わる時にフェードイン、フェードアウトするようにしたいです。

Question

前提・実現したいこと

macOS用アプリを作っています。
文章が8秒おきに切り替わるようにしました。
その文章が切り替わるときに、フェードイン、またはフェードアウトするようにしたいのです。
つまり、前の文章が消える→前の文章から次の文章に切り替わる（消えているので見えない）→次の文章が現れる、という順番に処理することで、見た目では前の文章がフェードアウトした後に次の文章がフェードインするようにしたいのです。

試したこと

struct ContentView: View {
    private let timer = Timer.publish(every: 8, on: .main, in: .default).autoconnect()
    @State var textOpacity: Double = 1
    @State var textIndex: Int = 0
    let textArray: [String] = ["Hello, world!", "こんにちは"]
    var body: some View {
        VStack {
            Text(textArray[textIndex])
                .opacity(textOpacity)
                .onReceive(timer){_ in
                    withAnimation(.linear(duration: 2.0)){
                        textOpacity = 0
                    }
                    withAnimation(.linear(duration: 0).delay(2.5)){
                        if(textIndex == 0){
                            textIndex = 1
                        } else{
                            textIndex = 0
                        }
                    }
                    withAnimation(.linear(duration: 2.0).delay(3.0)){
                        textOpacity = 1
                    }
                }
        }
    }
}

フェードイン、フェードアウトはopacityを0または1に変えることで実現しました。
.onReceiveのところで8秒おきに
2秒かけて消える→2.5秒目に文章が変わる→3.0秒目から2秒かけて現れる
となるようにしたつもりです。

しかし、実際にbuildすると
文章が変わる→消える→現れる
の順番になりました。

アドバイスよろしくお願いいたします。

文章が切り替わる時にフェードイン、フェードアウトが起きるようにできるならば、どんな方法でも用いたいです。
このコードの改良版はもちろん助かりますし、withAnimationやTimerなどを使わない方法でも教えていただけると大変有難いです。
よろしくお願いいたします。

Answer 1

Text(textArray[textIndex])の部分のアニメーションにつきまして、
テキストは数値みたいに徐々に値を変えるという考え方ではないため？(1,2,3,...)
opacityみたいにwithAnimationでアニメーションにするのが上手くいかないように見えますね。

SwiftUIのアニメーションは次の公式のチュートリアルも実践してみると良いかもしれませんね。

SwiftUI Tutorials Section 4 Customize View Transitions
https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

公式のチュートリアルを参考に、AnyTransitionを使った形で修正してみましたが、いかがでしょうか。

import SwiftUI

extension AnyTransition {
    static var asymmetricFade: AnyTransition {
        .asymmetric(
            insertion: .opacity.animation(.linear(duration: 2.0).delay(3.0)),
            removal: .opacity.animation(.linear(duration: 2.0))
        )
    }
}

struct ContentView: View {
    private let timer = Timer.publish(every: 8, on: .main, in: .default).autoconnect()
    @State var textIndex: Int = 0
    let textArray: [String] = ["Hello, world!", "こんにちは"]
    var body: some View {
        VStack {
            Text(textArray[textIndex])
                .id(textIndex)
                .transition(.asymmetricFade)
                .onReceive(timer){_ in
                    if(textIndex == 0){
                        textIndex = 1
                    } else{
                        textIndex = 0
                    }
                }
        }
    }
}

Comments

[SwiftBeginner]

ありがとうございます！うまく行きました！
リンクも送っていただきありがとうございます！