【Swift】UILabelを1文字ずつアニメーションで表示する

UILabelを1文字ずつタイピングしているような感じでアニメーションする方法を紹介します。

CLTypingLabelを使うと、とても簡単に実装することができます。

CLTypingLabelを導入する

GitHub – cl7/CLTypingLabel: iOS UILabel with character by character typing /typewriter animation

CLTypingLabelは1ファイルのみで構成されています。CocoaPodを使っても良いですが、CLTypingLabel.swiftをそのままコピーしてプロジェクトに組み込んでも良いです。そのほうが手軽かと思います。

UILabelアニメーションの各種設定

CLTypingLabelはUILabelを継承したクラスなので、UILabelと同じように使用することが可能です。

storyboardでUILabelを設置したり、もしくはコードで実装して、CLTypingLabelインスタンスを作成します。

あとは、CLTypingLabelにUILabelと同じようにtextを設定するだけでアニメーションされます。

UILabelアニメーションのスピード

アニメーションのスピードも簡単に設定することが可能です。

label.charInterval = 0.03

デフォルトは0.1に設定されているので、1秒で10文字と考えて良さそうです。それよりも早くアニメーションしたければ、上記のようにcharIntervalを0.1より小さい数値に設定します。

UILabelアニメーションのstart・pause・continue

アニメーションの開始は、textを設定したタイミングとなりますが、pauseやcontinueも可能です。

それぞれ、label.pauseTyping()、label.continueTyping()と関数を呼ぶだけです。

AttributedTextにも対応

CLTypingLabelはattributedTextにも対応しています。

label.attributedText = NSAttributedString(string: text)

非常にお手軽なので、試してみてください。

サンプルコード

import UIKit

class ViewController: UIViewController {

    private lazy var animationLabel: CLTypingLabel = {
        let label = CLTypingLabel()
        label.font = .systemFont(ofSize: 14, weight: .medium)
        label.charInterval = 0.03
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // labelをviewにaddする
        view.addSubview(animationLabel)

        // labelにAutoLayoutをコードで設定（viewの真ん中に固定）
        [animationLabel.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        animationLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)]
            .forEach { $0.isActive = true }

        // labelにtextを設定
        animationLabel.text = "Typing Animation"
    }
}

GitHub – cl7/CLTypingLabel: iOS UILabel with character by character typing /typewriter animation