Swiftで遊ぼう！ - 1006 - Layout-Driven UI を極めるための一歩

Swiftで遊ぼう！の前書き-> Life-LOG OtherSide

WWDC2018のビデオを見ていると、何でも簡単に実装できそうに思えるのですが自分で試そうとすると、直ぐに行き詰まってしまいます(T_T)

「Adding Delight to your iOS App」のLayout-Driven UIのトレーディングカードの動きを実装しようとしてるんですが、最初の簡単なデモからちゃんと動かないんです。壇上の二人はシンプルで簡単に実装できるって言ってるんですけどね。

簡単なデモが紹介されているけど、「Cool Guy」のコードがその例です。カンファレンスで示されているMyViewクラスは、CoolViewクラスをサブビューとして持っていますが、シンプルにするためにサブビューは省きました。

class MyView: UIView {
    
    var feelingCool = true {
        didSet {
            setNeedsLayout()
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.isHidden = !feelingCool
    }
}

プロパティ・オブザーバーで値の変化を監視して描画させるというのは旨いやり方ですね。これを実装すると、feelingCoolの値が変化するたびに、このクラスのインスタンスが出現したり消えたりします。ちゃんとLayoutが変化してるんです。しかし、切り替えは一瞬です。パッパッと切り替わるので美しくはありません。プレゼンテーションではCool Guyがジワーっと出現したり消えたりしています。

じゃあこのシンプルなデモにUIViewPropertyAnimatorクラスでアニメーションを加えてみました... あれこれコードを試してみてもうまく動かないんです。

一人で勉強していて困ることは、分からないところに直面すると解決するのに時間がかかるところです。ネットで情報を探してみてもなかなか答えが見つかりません。

こういう時はアップルの公式ドキュメントを読むのが一番いい方法のようですね。UIViewPropertyAnimatorを調べてみると、アニメーションを加えることができるプロパティは次のものだけということを知りました。

frame
bounds
center
transform
alpha
backgroundColor

これで理解できました！メソッド「.isHidden」でアニメーションになりませんね。ということで次のようにコードを書き換えました。

class MyView: UIView {

    var feelingCool = true {
        didSet {
            setNeedsLayout()
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if feelingCool {
            self.alpha = 1
        } else {
            self.alpha = 0
        }
    }
}