【SwiftUI】タイピング風テキストアニメーションを作ってみた

はじめに

ChatGPTはAIからの返答がタイピング風のアニメーションで返ってきます。
これをSwiftUIで再現できないかなと思い試してみました。

サンプルアプリ

ChatGPTの返答をそのまま表示してます

実装

ContentView

import SwiftUI

struct ContentView: View {
    @State var isStart: Bool = false
    private let input: String = """
            SwiftUIは、Appleが開発したiOS、macOS、watchOS、tvOSを対象とするUIフレームワークです。

            SwiftUIは、より簡単でスマートな方法でUIを構築することを目的としています。SwiftUIでは、UIを宣言的に記述し、プレビューでリアルタイムに表示されるため、デザインと実装を効率的に行うことができます。

            SwiftUIでは、画面を構成するUI要素（テキスト、画像、ボタンなど）を宣言するだけで、自動的にレイアウトが生成されます。また、SwiftUIでは、アプリケーションの自動更新機能を使用することで、データの変更が自動的にUIに反映されるようになります。

            SwiftUIでは、多数のプラットフォームをサポートするため、同じコードを使用して、iOS、macOS、watchOS、tvOSのアプリケーションを構築することができます。

            また、SwiftUIでは、Accessibility、Dark Mode、Localizationなどの機能も簡単に実装することができます。

            SwiftUIを使用することで、より効率的でスマートな方法でUIを構築することができるため、現在では非常に人気のあるUIフレームワークとなっています。
            """
    var body: some View {
        VStack {
            Button {
                isStart = true
            } label: {
                Text("スタート")
            }

            TypeWriterTextView(
                input,
                speed: 0.1,
                isStart: $isStart
            )
        }
        .padding()
    }
}

TypeWriterTextView

import SwiftUI

struct TypeWriterTextView: View {
    private let text: String

    private let speed: TimeInterval

    @Binding var isStart: Bool

    @State private var textArray: String = ""

    init(_ text: String, speed: TimeInterval = 0.1, isStart: Binding<Bool>) {
        self.text = text
        self.speed = speed
        self._isStart = isStart
    }

    var body: some View {
        Text(textArray)
            .onChange(of: isStart) { _ in
                startAnimation()
            }
    }

    private func startAnimation() {
        DispatchQueue.global().async {
            let _ = text.map {
                Thread.sleep(forTimeInterval: speed)
                textArray += $0.description
            }
        }
    }
}

おわり

ちゃんと使えるようになったらライブラリにでもしようかと思ってます