Selection 9: CoreAnimation Lesson.(Lesson2-2) - UIViewAnimationOptions/アニメーションイージングカーブ編

前回(Lesson2-1)ではブロックベースメソッドを使用した簡単なアニメーション実装について説明しました。引き続き、UIViewクラスのブロックベースアニメーションメソッドを使用したアニメーションについて説明していきます。

CoreAnimation Lesson.シリーズへのリンク。

アニメーションイージングカーブ

UIViewクラスのブロックベースアニメーションメソッド。

[Animating Views with Block Objects]
+ animateWithDuration:delay:options:animations:completion:

class func animateWithDuration(_ duration: NSTimeInterval,
                         delay delay: NSTimeInterval,
                       options options: UIViewAnimationOptions,
                    animations animations: () -> Void,
                    completion completion: ((Bool) -> Void)?)

前回あまり詳しく説明出来なかった引数optionsについて説明します。 options引数は複数指定出来ますが、大きく3種類に分類することができて、

アニメーションの振る舞い
アニメーションイージングカーブ ←今回説明する部分
トランジションエフェクト

について設定出来ます。optionsの型は、UIViewAnimationOptionsとなっておりswiftだと構造体で、Objective-Cたと、emunで定義されている様です。今回は、アニメーションイージングカーブについて説明します。

アニメーションイージングカーブは以下に示す4種類の設定が可能です。

UIViewAnimationOptions	概要
CurveEaseInOut	ゆっくり始まって、加速して、ゆっくり止まる。 (デフォルト)
CurveEaseIn	ゆっくり始まって、加速して急に止まる。
CurveEaseOut	急に始まり、ゆっくり止まる。
CurveLinear	初めから最後まで一定速度。

実装

基本的には以下に示す基本的なブロックベースアニメーションメソッドを使用します。以下は例としてoptionにCurveEaseInOutを指定しています。

    // EaseInOut
    let option:UIViewAnimationOptions = .CurveEaseInOut
    UIView.animateWithDuration(duration, delay: delay, options: option, animations: {
        // animation
        self.myView.frame.origin.y = topBarHeight + 50
            
    }) { (complete) in
        NSLog("animation completed.")
        // アニメーション完了時の処理
        self.myView.backgroundColor = UIColor.redColor()

    }

それでは実際に動かしてみましょう。

UIViewAnimationOptions.CurveLinear

UIViewAnimationOptions.CurveLinearは、はじめから最後まで一定速度のアニメーション。