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

先日、テキスト入力時のエフェクトが美しい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ブランチを指定する必要があります。今後、Swift3に対応済みになった場合はpod 'LTMorphingLabel'のみで大丈夫になります。

導入する

1.UILabelを置く

storyboard上にUILabelを配置します。

label

2.制約をつける

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

制約をつける

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

UILabelのClassLTMorphingLabelを設定します。

カスタムクラスを設定

4.IBOutletで接続する

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

Outlet

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

import LTMorphingLabel

を追加します。

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

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

sampleLabel.morphingEffect = .evaporate

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

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

備考

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

プロパティ

サンプル

文字の切り替え

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

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がエフェクト終了時に呼ばれます。

実行イメージ

ラベルを増やして各エフェクトを追加したものを、シミュレーターで実行してみました。

白背景

白背景

黒背景

黒背景

さいごに

上記のサンプルは並べてしまったので、ちょっと微妙な感じになってしまいましたが、きちんとデザインされたうえで導入すれば凄くカッコ良くなりそうです。
スプラッシュ画面やウォークスルーなどのイントロ画面などと親和性が高そうだと思いました。