LoginSignup
17

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-10-30

今回は、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を用いることで他にも移動や回転などのアニメーションもできるので色々試してみるといいと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17