【iOS】テレビのクイズ問題テロップのように1文字ずつテキスト表示する方法（Swift）

2021年5月1日 2021年6月1日

idea_ios_text_delay

UITextViewの文字列を段階的に表示する方法

アニメーションのように文字列を時間差で徐々に表示する方法

ヒーラー

クイズ番組の問題文のアニメーションのように、少しずつテキストを表示するようにしたい

やりたいこと

以下のようにクイズの問題文を1文字ずつ徐々に表示して、問題を読み上げているような雰囲気を出すイメージです。
文字列を一発で表示するよりもクイズの臨場感が表現することができます。

対処方法

タイマーを使用して、テキスト表示部分に対して、1文字ずつ段階的に表示したい文字数を増やしていきながら表示する対応です。
具体的には以下のようなコードです。

// MARK: - Properties
@IBOutlet weak var questionText: UITextView! //問題文
var timer = Timer() //問題文タイマー
var currentCharNum = 0 //現在の文字数

// 問題文表示開始
func start() {
　　　　timer = Timer.scheduledTimer(timeInterval: 0.05, target: self, selector:#selector(showDelayText(time:)), userInfo: q.question, repeats: true)
}

@objc func showDelayText(time: Timer) {
    let message = time.userInfo as! String
    questionText.text = String(message.prefix(currentCharNum))
    if message.count <= currentCharNum {
        time.invalidate()
        currentCharNum = 0
        return
    }
    currentCharNum += 1
}

問題文の文字列に対し、先頭何文字取り出すということをTimerで設定した0.05秒間隔で増やしながら繰り返して表示するということです。

今回はUITextViewを使用していますが、UILabelなど他のテキスト表示でも同様です。

アニメーションの途中で回答したり、他のアクションによってアニメーションを止めたい場合は、以下のコードで止めることができます。