UIButtonやUILabelなどのテキストにアニメーションをつける

今回は、CAAnimationを用いてUIButtonやUILabelなどのテキストにアニメーションをつけるやり方を紹介したいと思います。今回の記事が初投稿になりますので、何か気になる点があれば気軽にコメントください。

実装

CAAnimationを用いることによって、テキストでも色々なアニメーションをつけることができます。実装の流れは以下の通りです。今回はUIButtonを例に紹介したいと思います。

1. UIButtonのテキストをCATextLayerに置き換える
2. CAAnimationでアニメーション

UIButtonのテキストをCATextLayerに置き換える

まずはCAAnimationを使うためにCALayerクラスを継承しているCATextLayerをUIButtonのテキストと置き換えます。UIButtonの継承クラスでも作ってTitle系のメソッドをオーバーライドしてあげるといいんじゃないでしょうか。

public class MyButton: UIButton {

・・・

    override public func setTitle(title: String?, forState state: UIControlState) {
        super.setTitle(title, forState: state)

        self.setTitleColor(UIColor.clearColor(), forState: state)
        self.setTextLayerToLayer()
    }

    override public func setTitleColor(color: UIColor?, forState state: UIControlState) {
        super.setTitleColor(UIColor.clearColor(), forState: state)
        self.textLayer.foregroundColor = color?.CGColor
    }

UIButtonのタイトルの色をclearColorに設定してあげて、その上にCATextLayerをセットしていきます。

private let textLayer = CATextLayer()

・・・

private func setTextLayerToLayer() {
        let font = self.titleLabel?.font
        let text = self.currentTitle
        
        var attributes = [String: AnyObject]()
        attributes[NSFontAttributeName] = font
        let size = text!.sizeWithAttributes(attributes)
        
        let x = (CGRectGetWidth(self.frame) - size.width) / 2
        let y = (CGRectGetHeight(self.frame) - size.height) / 2
        let height = size.height + self.layer.borderWidth
        let width = size.width
        
        textLayer.frame = CGRectMake(x, y, width, height)
        textLayer.font = font
        textLayer.string = text
        textLayer.fontSize = font!.pointSize
        
        textLayer.contentsScale = UIScreen.mainScreen().scale
        
        textLayer.alignmentMode = kCAAlignmentCenter
        self.later.addSublayer(textLayer)
    }

CATextLayerをButtonのLayer上に中央揃えで配置します。CATextLayerのFontは元のFontと合わせることでFontの違いによるずれを防ぎます。

（CATextLayerの上下中央揃えは http://qiita.com/morizotter/items/1a89bc60ba870a51d251 を参照）

CAAnimationでアニメーション

CAAnimationでCATextLayerにアニメーションをつけます。文字色が点滅するようなアニメーションにしています。

public func animateText() {
        let textColorAnimation = CABasicAnimation(keyPath: "foregroundColor")
        textColorAnimation.duration = 2.0
        textColorAnimation.autoreverses = true
        textColorAnimation.repeatCount = 1e100
        textColorAnimation.fromValue = UIColor.clearColor().CGColor
        textColorAnimation.toValue = self.blackColor().CGColor
        textLayer.foregroundColor = self.blackColor().CGColor
        textLayer.addAnimation(textColorAnimation, forKey: "TextColor")
    }

最後に

CAAnimationを用いてテキストにアニメーションをつける方法を紹介しました。
同じような方法でUILabelなどのテキストもアニメーションをさせることができると思います。CAAnimationを用いることで他にも移動や回転などのアニメーションもできるので色々試してみるといいと思います。