AutoLayoutでアニメーションさせる話

12789 ワード
AutoLayout iOS Swift Swift4 iOS テキストリンク

この記事はYahoo! JAPAN 18 新卒 2 Advent Calendar 2018　18日目の記事です。
前回の記事は@jiazioさんのSRv6で8パズルを解いてみるでした。

１枚目はこちら Yahoo! JAPAN 18 新卒 Advent Calendar 2018

はじめに

最近、アプリにアニメーションとか入れてリッチにしたいなーと思ってるんですが、入社してデザイナーさんとも一緒に作業することも多く、アニメーションさせるにもAutoLayoutを使っている前提でのアニメーションなどが必要になる機会が増えてきたので、そのあたりをまとめてみたいと思います。

作るもの

アニメーションさせるにもなるべくコードを書かずに以下の様なアニメーションを実現します。

緑のViewに合わせてグレーのViewも変化していますが、やってることは緑のViewの左側の幅を変更しているだけです。
変更の仕方にも今回は2パターン記述します。

constantを変更する

水平方向の制約については以下の様に付けています。

緑のViewの左側のconstantの変化をグレーのViewのwidthで吸収するイメージです。コードで変化させるNSLayoutConstraintだけ、関連付けして値を動かせる様にします。

swift4.0

class ViewController: UIViewController {

    @IBOutlet weak var leftConstraint: NSLayoutConstraint!
    var isMoved = false

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

    @IBAction func tappedButton(_ sender: UIButton) {
        leftConstraint.constant = isMoved ? 50 : 100
        isMoved = !isMoved
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

もし、constantの値をベタ書きするのが嫌な場合は@IBInspectableでstoryboard側に持たせましょう。この方がデザイナーさんに優しい。storyboardはこうなります。

swift4.0

class ViewController: UIViewController {

    @IBInspectable var defaultConstant: CGFloat = 0.0
    @IBInspectable var movedConstant: CGFloat = 0.0

    @IBOutlet weak var leftConstraint: NSLayoutConstraint!
    var isMoved = false

    override func viewDidLoad() {
        super.viewDidLoad()
        leftConstraint.constant = defaultConstant
    }

    @IBAction func tappedButton(_ sender: UIButton) {
        leftConstraint.constant = isMoved ? movedConstant : defaultConstant
        isMoved = !isMoved
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

isActiveで制約を使い分ける

次に、2つめのやり方として NSLayoutConstraint.isActiveを変更する方法があります。
先ほどと同じ動作をさせて見ましょう。

その際に緑のViewの左の幅の制約を2つ付ける必要があります。
素直に入れると以下の様に怒られます。

基本的に制約を付けると、priority = 1000となっているので、移動後に有効にしたい制約のpriorityを下げて差を付けます。他の制約との兼ね合いを見ながら調整します。ここでは900にしてます。

1000より小さくすると破線になります。

この状態で、以下の様に実装すると同様の動きが得られます。

swift4.0

class ViewController: UIViewController {

    @IBOutlet var defaultLeftConstraint: NSLayoutConstraint!
    @IBOutlet var movedLeftConstraint: NSLayoutConstraint!

    var isMoved = false

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

    @IBAction func tappedButton(_ sender: UIButton) {
        defaultLeftConstraint.isActive = !isMoved
        movedLeftConstraint.isActive = isMoved
        isMoved = !isMoved

        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

swift4.2

class ViewController: UIViewController {

    @IBOutlet var defaultLeftConstraint: NSLayoutConstraint!
    @IBOutlet var movedLeftConstraint: NSLayoutConstraint!

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

    @IBAction func tappedButton(_ sender: UIButton) {
        defaultLeftConstraint.isActive.toggle()
        movedLeftConstraint.isActive.toggle()

        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

注意する点として、 NSLayoutConstraintをweakにしていると、isActive = falseのときに制約自体がnilになってしまうので、このやり方の場合は強参照で持たせましょう。

constantを変更する方がシンプルで簡単ですが、cellなどの利用して複雑な構成になってくるとisActiveで制約を使い分ける方法も有効になって来ます。

終わりに

サクッと触りの部分だけ書きましたが、もっと色々追求して行こうと思ってます。こんなのもあるよーなどあれば教えてくださいー！
追記 4.2からtoggle()が良いよって話があったので、それ用にもコード足しました。