[iOS][Swift3.0] ラベル表示のエフェクトが美しいLTMorphingLabel

斎藤稔

2017.01.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

先日、テキスト入力時のエフェクトが美しいTextFieldEffectsを取り上げましたが、今回はテキスト切替時のエフェクトが美しいLTMorphingLabelを試してみました。ライセンスはMITです。

https://github.com/lexrus/LTMorphingLabel

検証環境

今回は下記環境で試しています。

Xcode	8.2
Swift	3.0.2
CocoaPods	1.0.0

準備

導入

CocoaPodsで追加します。

use_frameworks!
target "ターゲット名"
pod 'LTMorphingLabel', :git => 'https://github.com/lexrus/LTMorphingLabel.git', :branch => 'swift3'

post_install do |installer|
    installer.pods_project.targets.each do |target|
target.build_configurations.each do |configuration|
    configuration.build_settings['SWIFT_VERSION'] = "3.0"
end
    end
end

現時点（2017/1/4）ではmasterブランチはSwift3には対応していません。そのため、swift3ブランチを指定する必要があります。今後、Swift３に対応済みになった場合はpod 'LTMorphingLabel'のみで大丈夫になります。

導入する

1.UILabelを置く

storyboard上にUILabelを配置します。

2.制約をつける

適宜、制約を設定します。

3.カスタムクラスを設定する

UILabelのClassにLTMorphingLabelを設定します。

4.IBOutletで接続する

LTMorphingLabelクラスを設定したら、IBOutletで接続します。

また、接続時にエラーになるので、コードに

import LTMorphingLabel

を追加します。

５.コードでエフェクトの種類を設定する

デフォルトではscaleというエフェクトになります。違うエフェクトが良い場合は、morphingEffectプロパティにエフェクトを指定します。

sampleLabel.morphingEffect = .evaporate

エフェクトの種類は下記になります。

.scale
.evaporate
.fall
.pixelate
.sparkle
.burn
.anvil

備考

LTMorphingLabelでは、エフェクトの時間やタイミングなどを調整出来るように、IBInspectableでプロパティが設定されています。調整が必要な場合は適宜、コードやインスペクタから変更してください。

サンプル

文字の切り替え

LTMorphingLabelは文字の表示時や切り替え時にエフェクトが発生します。
今回はサンプルとしてタイマーで３秒毎に文字を切り替えてみました。

import UIKit
import LTMorphingLabel

class ViewController: UIViewController {

    @IBOutlet weak var sampleLabel: LTMorphingLabel!

    private var timer: Timer?
    private var index: Int = 0
    // 表示する文字リスト
    private let textList = ["Swift 3", "The powerful programming language ", "that is also easy to learn."]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // エフェクトの定義
        sampleLabel.morphingEffect = .evaporate
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        timer = Timer.scheduledTimer(timeInterval: 3.0,
                                     target: self,
                                     selector: #selector(updateLabel(timer:)), userInfo: nil,
                                     repeats: true)
        timer?.fire()
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)

        timer?.invalidate()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func updateLabel(timer: Timer) {
        sampleLabel.text = textList[index]

        index += 1
        if index >= textList.count {
            index = 0
        }
    }
}

エフェクトの開始/終了の通知を受け取る

LTMorphingLabelにはdelegateが用意されており、エフェクトの各種タイミングを受け取ることができます。

    〜 前略 〜
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // エフェクトの定義
        sampleLabel.morphingEffect = .evaporate
        sampleLabel.delegate = self
    }
    
    〜 中略 〜

}
extension ViewController: LTMorphingLabelDelegate {

    func morphingDidStart(_ label: LTMorphingLabel) {
        print("morphingDidStart")
    }

    func morphingDidComplete(_ label: LTMorphingLabel) {
        print("morphingDidComplete")
    }

    func morphingOnProgress(_ label: LTMorphingLabel, progress: Float) {
        print("morphingOnProgress", progress)
    }
}

morphingDidStartがエフェクト開始時、morphingOnProgressがエフェクト中（複数回）、morphingDidCompleteがエフェクト終了時に呼ばれます。