この記事は公開されてから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ブランチを指定する必要があります。今後、Swift3に対応済みになった場合はpod 'LTMorphingLabel'のみで大丈夫になります。
導入する
1.UILabelを置く
storyboard上にUILabelを配置します。
2.制約をつける
適宜、制約を設定します。
3.カスタムクラスを設定する
UILabelのClassにLTMorphingLabelを設定します。
4.IBOutletで接続する
LTMorphingLabelクラスを設定したら、IBOutletで接続します。
また、接続時にエラーになるので、コードに
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がエフェクト終了時に呼ばれます。
実行イメージ
ラベルを増やして各エフェクトを追加したものを、シミュレーターで実行してみました。
白背景
黒背景
さいごに
上記のサンプルは並べてしまったので、ちょっと微妙な感じになってしまいましたが、きちんとデザインされたうえで導入すれば凄くカッコ良くなりそうです。
スプラッシュ画面やウォークスルーなどのイントロ画面などと親和性が高そうだと思いました。