[iOS 10][UIKit] 新しく加わった動的なアニメーション実装の方法とその周辺解説

2016.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

おばんです、仙台のイオンは店舗が大きかったのですが東京でイオンというと割と店舗が小さめであることに気付き、シティボーイになっちまった感を得ている田中です。

今回はUIKitに新しく加わったUIViewPropertyAnimatorとその周辺について説明していきます。

UIViewPropertyAnimatorが加わるとなにがよいのか

UIKitにおいてこれまで動的にアニメーションに変更を加えたりすることができませんでした。

例えば

  • 開始したアニメーションを途中でアニメーションを止めて、またそこから再開する(start, pause, stopの制御)
  • 開始したアニメーションの途中でユーザーのアクションに応じてアニメーションを変更する

などができませんでした。

そこで登場したのがUIViewPropertyAnimatorです。
今回は前者のstart, pause, restartをするサンプルを取り上げて、stopの処理も含めて説明していきます。
完成品は以下の動画のようなもの。

実装方法

以下のような方法で実装が可能です。
コードの解説はコメントアウトにて記載。

import UIKit

class ViewController: UIViewController {

    var subview: UIView!
    var animator: UIViewPropertyAnimator!

    override func viewDidLoad() {
        super.viewDidLoad()

        // subviewの設定
        subview = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        subview.center.x = view.center.x
        subview.center.y = 50
        subview.layer.cornerRadius = 25
        subview.backgroundColor = UIColor.cyan
        view.addSubview(subview)

        // アニメーションの設定
        // タイミングカーブを.linearに設定
        let timing = UICubicTimingParameters(animationCurve: .linear)

        // アニメーションの時間を2秒、タイミングパラメータに上で定義したtimingをセット
        animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)
        // アニメーションを追加
        animator.addAnimations {
            self.subview.center.y += 100
        }
    }

    @IBAction func tapStartButton(_ sender: AnyObject) {
        // アニメーションスタート
        animator.startAnimation()
    }

    @IBAction func tapPauseButton(_ sender: AnyObject) {
        // アニメーションポーズ
        animator.pauseAnimation()
    }

    @IBAction func tapStopButton(_ sender: AnyObject) {
        // アニメーションストップ
        // trueだとanimatorはinactiveになる
        // falseだとanimatorはstoppedになる
        // アニメーションが自然に終わった場合はこのメソッドは呼ばれない
        animator.stopAnimation(false)
    }
}

周辺解説

説明に使う図に出てくる関数やプロパティなどはアクセス修飾子など一部省略している箇所があります。

UIViewPropertyAnimator

UIViewPropertyAnimatorの継承関係と役割、そして主要な機能は以下の図のようになります。

スクリーンショット 2016-09-14 1.02.16

UICubicTimingParameters

UICubicTimingParametersの継承関係と役割、そして主要な機能は以下の図のようになります。

スクリーンショット 2016-09-14 1.15.29

まとめ

今回の記事では触りのみの紹介です。
UIViewPropertyAnimatorの登場によってUIKitで行えるアニメーションに幅が出ます、とてもよい追加実装に思います。
実際に使ってみての所感など、なにか掴めるところがありましたら今後また詳しく解説記事をまとめます。