前回(Lesson2-1)ではブロックベースメソッドを使用した簡単なアニメーション実装について説明しました。引き続き、UIViewクラスのブロックベースアニメーションメソッドを使用したアニメーションについて説明していきます。
CoreAnimation Lesson.シリーズへのリンク。- Core Animation Lesson.(Lesson1) - UIViewとCALayer
- Core Animation Lesson.(Lesson1-4〜1-6) - CALayerクラスのプロパティ
- Core Animation Lesson.(Lesson1-7) - カスタム描画
- Core Animation Lesson.(Lesson2-1) - 基本のアニメーション
[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.CurveEaseInOutは、ゆっくり始まって、加速して、ゆっくり止まります。Linear指定との違いをわかりやすくするため、右側の図では、左側にLinearを指定したもの、右側にEaseInOutを指定したViewをアニメーションしています。
UIViewAnimationOptions.CurveEaseInは、ゆっくり始まって、加速して急に止まります。右側の図では左側にLinearを指定し、左側にEaseInを指定したアニメーションです。
UIViewAnimationOptions.CurveEaseOutは、急に始まり、ゆっくり止まります。右側の図では左側にLinearを指定し、左側にEaseOutを指定したアニメーションです。
サンプルプログラムはGitHubにあります。https://github.com/takuran/CoreAnimationLesson
- Core Animation Lesson.(Lesson1) - UIViewとCALayer
- Core Animation Lesson.(Lesson1-4〜1-6) - CALayerクラスのプロパティ
- Core Animation Lesson.(Lesson1-7) - カスタム描画
- Core Animation Lesson.(Lesson2-1) - 基本のアニメーション
