iOS10からのAnimationがいい感じ！ #Swift

こんにちは。現在Standard Cognition（ https://standard.ai )というSFにある会社でSoftware Engineerをやっている原健太です(Twitterアカウント)

WWDC16で、iOS10から使えるアニメーションに関する新しい発表がありました。
動的なアニメーションの追加や、一時停止など、柔軟にいろんな事ができるようになっていたので、紹介したいと思います！

従来のアニメーション

まず、従来のアニメーションは、こんな感じで書いていたかと思います。


UIView.animateWithDuration(2.0, delay: 0, options: .CurveEaseInOut, animations: { 

    // animation

}) { _ in

    // completion

}

まず、こちらのメソッドも、Swift3からはこんな感じに変わります！


UIView.animate(withDuration: 2.0, delay: 0, options: [.curveEaseIn, .curveEaseOut], animations: {

}) { _ in

}

メソッド名はシンプルになって、第一引数も外部名が表記するようになっています。
UIViewAnimationOptionsがlowerCamelCaseになっている
curveEaseInOutが無かったのですが、それを実現するには、このようにするんですかね、、？？

ただ、これも、動的にいろんな操作をするには向いていません。

だからといって、CoreAnimationも分かりづらかったり、beginFromCurrentStateというoptionの挙動もわかりづらい、、、

そこで登場したのが、 UIViewPropertyAnimatorです！こちらのクラスを使うと、アニメーションに対していろんな柔軟な対応ができるようになっています！

UIViewPropertyAnimator

ざっと、このような感じで使います！


let timing = UICubicTimingParameters(animationCurve: .easeInOut)
let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)

animator.addAnimations { 
    // animation
}

animator.startAnimation()

animator.pauseAnimation()

なんだか、いろいろできそうな予感がします。


@IBAction func handlePan(recognizer: UIPanGestureRecognizer) {

    let translation = recognizer.translation(in: self.view)
    let translatedCenterY = view.center.y + translation.y
    let progress = translatedCenterY / self.view.bounds.size.height

    animator.fractionComplete = progress
}

このように、ユーザのジェスチャに応じてアニメーションの進行を操作することもできます。

UIViewPropertyAnimator周りのクラス図

UIViewAnimatingとUIViewImplicitlyというプロトコルに準拠しています。
UITimingCurveProviderというプロトコルに準拠したオブジェクトを受け取って、アニメーションのタイミングを調整します。

UIViewAnimatingプロトコル

アニメーションのフローを制御するメソッドやプロパティが定義されている。

メソッド

func startAnimation()
func pauseAnimation()
- アニメーションの一時停止
- AnimatingStateはactiveのまま
func stopAnimation(_ withoutFinishing: Bool)
- アニメーションを現在のポジションで終了させたい時に利用する
- 引数にtrueを渡すと直接inactiveのステートに変化する
- 引数にfalseを渡すと、stoppedステートに変化し、終了させるにはfinishAnimationメソッドを呼ぶ
func finishAnimation(at: UIViewAnimatingPosition)
- stoppedステートの時にこのメソッドを呼んでアニメーションを終了させる
- stoppedステートに遷移する前にこのメソッドを呼ぶとエラーになる。
- inactiveステートに遷移する

プロパティ

var fractionComplete: CGFloat
- アニメーションの完了度合いのパーセンテージ
- 0.0 - 1.0の値をとる
- この値を操作することにより、アニメーションをインテラクティブに操作できる
var isReversed: Bool
- このプロパティを操作することによってアニメーションの方向を操作できる
var state: UIViewAnimatingState

Enumで
- inactive
- active
- stopped

の3つの値を持つ
- var isRunning: Bool
- アニメーションが進行中かどうか

UIViewImplicitlyAnimatingプロトコル

アニメーションのカスタマイズに関するメソッドが定義されている

メソッド

func addAnimations(() -> Void)
- アニメーションを定義する
func addAnimations(() -> Void, delayFactor: CGFloat)
- 元々のアニメーションに対して、途中から別のアニメーションを開始する場合などに利用する
- delayFactorには0.0 - 1.0の値を入れる
- 例えば、0.7を入れたら、元々のアニメーションの7割が終了した時点で、追加のアニメーションが開始される
func addCompletion((UIViewAnimatingPosition) -> Void)
- アニメーションが終了したときの処理を記述する
UIViewAnimatingPositionはEnumで、
- end
- start
- current

の3つの値がある
func continueAnimation(withTimingParameters: UITimingCurveProvider?, durationFactor: CGFloat)
- pauseしているアニメーションに対して、タイミングや、durationを変更して再開したい場合に利用する
- durationFactorの値と、元々のdurationを掛けた値が最終的なdurationになる

UICubicTimingParameters

アニメーションのタイミングを定義するクラス

イニシャライズ

init()
init(animationCurve: UIViewAnimationCurve)

UIViewAnimationCurveには

- case easeInOut // slow at beginning and end
- case easeIn // slow at beginning
- case easeOut // slow at end
- case linear

の4つが定義されている

init(controlPoint1: CGPoint, controlPoint2: CGPoint)
- 2つの点を定義することにより、3次ベジェ曲線を定義する

UISpringTimingParameters

このクラスのオブジェクトをUIViewPropertyAnimatorに渡す事によってバネのような動きのアニメーションを実現できる

イニシャライズ

init()
init(dampingRatio: CGFloat)
- 減衰比を渡す
- 0.0 - 1.0の値を取り、小さいほど揺れが大きくなる
init(dampingRatio: CGFloat, initialVelocity: CGVector)
- 上記のに加え、初期の方向と速度を渡すことができる
init(mass: CGFloat, stiffness: CGFloat, damping: CGFloat, initialVelocity: CGVector)
- massは質量
- stiffnessはバネの硬さ？？
- dampingは減衰の強さ？？
- initialVelocityは初期の方向と速度

間違っていたら教えてください。正直、うまい値の渡し方がわかりません笑

このクラスをうまく使うと、このようなアニメーションが実現できるようです！
すごい！！！

UIViewControllerAnimatedTransitioning

UIViewPropetyAnimatorを用いたアニメーションは画面遷移にも使えるようです！！


func animateTransition(_ transitionContext: UIViewControllerContextTransitioning) {

    self.interruptibleAnimator(forTransition: transitionContext)?.startAnimation(
}

func interruptibleAnimator(forTransition transitionContext: UIViewControllerContextTransitioning?) -> UIViewImplicitlyAnimating? {

    let timing = UICubicTimingParameters(animationCurve: .easeInOut)
    let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)

    animator.addAnimations {
        // animation
    }

    return animator
}

のように、新しく追加されたinterruptibleAnimatorメソッドでUIViewPropertyAnimatorのオブジェクトを返して、従来使っていたanimateTransitionメソッドでアニメーションを開始してあげる、という流れです。

まとめ

なんだか気持ち良いアニメーションが作りたくなった
iOS10からの対応なので、半年後とか1年後くらいまで使えない！
セッション動画はこちらです！！