Core Animation Lesson.(Lesson2-1) - 基本のアニメーション

アニメーションしてみよう(Lesson2-1)

前回はCALayerの基本的な振る舞いやプロパティについて記載しました。

Lesson1(CALayerのプロパティについて)

Lesson1-4〜(CALayerのプロパティについて続き)

Lesson1-7(カスタム描画)

今回は実際にアニメーションを実践してみます。難しそうな暗黙的アニメーションとか明示的アニメーションの説明は置いておいて、別の機会に説明できればと思います。

一番簡単にアニメーションを実装するには、UIViewクラスのブロックベースアニメーションメソッドを使用することです。
現時点(iOS9)で、ブロックベースのアニメーションメソッドは、大きく3種類ありますね。

 • アニメーション(直線的)
 • トランジションアニメーション(画面が移り変わるようなアニメーション)
 • キーフレームアニメーション(非直線的)
 

アニメーション(直線的)

簡単なアニメーション実装であればこのメソッドで十分でしょう。一番ベーシックなアニメーション実装です。アニメーション用のブロックベースメソッドはスプリングのようなバウンドアニメーションを実現するメソッドも有りますが、まずはスプリングアニメーションの無い、基本のブロックベースアニメーションメソッドを試してみます。

Viewが画面上方向へ移動するだけのアニメーションです。上記アニメーションの実装は以下のようになります。(swift)

// アニメーション実行
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {

    // myViewの中心点y座標を変更
    self.myView.center.y = 100
            
}) { (complete) in

    // アニメーションが完了したら、myViewの背景色を赤色に
    self.myView.backgroundColor = UIColor.redColor()
            
}

アニメーション時間0.5秒で、myView(アニメーションしているViewです)の中心点y座標を100に変更して、アニメーションが完了したらmyViewの背景色を赤色に変更します。簡単ですね。たったこれだけのコードでアニメーション出来てしまいます。

上記アニメーションを実装しているUIViewクラスのアニメーションブロックメソッドの定義が以下です。(swift)

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

引数の意味は、

引数	意味
duration	アニメーション全体の実行時間(秒)。短ければ早いアニメーション、長ければ遅いアニメーションになる。
delay	遅延時間(秒)。指定した時間待ってからアニメーションが実行される。
options	アニメーションオプション。実行するアニメーションに対するオプションを指定する。詳細はいずれしますが、例ではアニメーションカーブを指定しています。UIViewAnimationOptions列挙型で指定可能なアニメーションカーブは主に、CurveLinear, CurveEaseInOut, CurveEaseIn, CurveEaseOut となっています。デフォルト値はCurveEaseInOut(ゆっくり加速して、ゆっくり減速して終わる)です。
animations	アニメーションブロックオブジェクト。UIViewクラスのanimatable propertiesのパラメータを操作する。
completion	完了時ブロックオブジェクト。アニメーション完了時に実行する処理を記載する。

animations引数

animationsブロックでは、アニメーション終了時の値を設定します。つまり、アニメーションはアニメーション開始前の値とanimationsブロックで指定するアニメーション終了時の値を元に、その間の値を直線的に補完することでアニメーションを行います。変更可能な値は以下に示すUIViewクラスのアニメーション可能なプロパティに限られています。

• @property frame
• @property bounds
• @property center
• @property transform
• @property alpha
• @property backgroundColor
• @property contentStretch

例えば、

[Viewを動かしたい場合(move)]

centerかframeのoriginを変更するのかな良いでしょう。これは一番はじめの例の通りです。

// アニメーション実行
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {

    // myViewの中心点y座標を変更
    self.myView.center.y = 100
            
}) { (complete) in
 
    // アニメーションが完了したら、myViewの背景色を赤色に
    self.myView.backgroundColor = UIColor.redColor()           
}

[Viewのサイズを変更したい場合(scale)]

frameのsizeかtransformを使用するのが良いでしょう。上記はtansformを使用してviewの高さ、幅を2倍に拡大しています。animationsブロックのコードは以下のようになるでしょう。

// アニメーション実行
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {

    // サイズ変更
    // transform
    let transform = CGAffineTransformMakeScale(2.0, 2.0)
    self.myView.transform = transform
            
}) { (complete) in

    // アニメーションが完了したら、myViewの背景色を赤色に
    self.myView.backgroundColor = UIColor.redColor()           
}

[透過させたい場合(alpha)]

alpha を変更します。上記はalpha値を変更してだんだんと透明になっていくアニメーションです。animationsブロックのコードは以下のようになるでしょう。

// アニメーション実行
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {

    // alpha
    self.myView.alpha = 0.0
            
}) { (complete) in

    // アニメーションが完了したら、myViewの背景色を赤色に
    self.myView.backgroundColor = UIColor.redColor()           
}

[背景色を変更したい場合(bgcolor)]

backgroundColor を変更します。上記は背景色が青色からだんだんと赤色へアニメーションします。animationsブロックのコードは以下のようになるでしょう。

// アニメーション実行
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {

    // 背景色
    self.myView.backgroundColor = UIColor.redColor()
            
}) { (complete) in

    // アニメーションが完了したら、myViewの背景色を赤色に
    self.myView.backgroundColor = UIColor.redColor()           
}

あと、boundsとcontentStretchが出て来ていませんが、あまり用途は無いと思います。 こちらか こちらを参照する事でなんとなくイメージがつかめるでしょう。

[複数のプロパティ値を組み合わせたアニメーション]

例として、プロパティを一つづつ変更しましたが、移動しながら、拡大縮小、フェードアウトしたりと、それぞれを組み合わせても良いです。

// アニメーション実行
UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {

    // 全て指定
    self.myView.center.y = 100
    let transform = CGAffineTransformMakeScale(2.0, 2.0)
    self.myView.transform = transform
    self.myView.alpha = 0.0
    self.myView.backgroundColor = UIColor.redColor()
            
}) { (complete) in

    // アニメーションが完了したら、myViewの背景色を赤色に
    self.myView.backgroundColor = UIColor.redColor()           
}

凝ったアニメーションでなければ、殆どはこのメソッドでこと足りるでしょう。
本ページで作成した確認用アプリはGitHubで公開しています。コードの詳細は次のURLを参照下さい。https://github.com/takuran/CoreAnimationLesson

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) - 基本のアニメーション
• CoreAnimation Lesson.(Lesson2-2) - UIViewAnimationOptions/アニメーションイージングカーブ編

---