2016年6月26日日曜日

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

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

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

  • Lesson1(CALayerのプロパティについて)
  • Lesson1-4〜(CALayerのプロパティについて続き)
  • Lesson1-7(カスタム描画)
    • 今回は実際にアニメーションを実践してみます。難しそうな暗黙的アニメーションとか明示的アニメーションの説明は置いておいて、別の機会に説明できればと思います。

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

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

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

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

    1. // アニメーション実行
    2. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
    3.  
    4.     // myViewの中心点y座標を変更
    5.     self.myView.center.y = 100
    6.             
    7. }) { (complete) in
    8.  
    9.     // アニメーションが完了したら、myViewの背景色を赤色に
    10.     self.myView.backgroundColor = UIColor.redColor()
    11.             
    12. }

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

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

    1. class func animateWithDuration(_ duration: NSTimeInterval,
    2.                          delay delay: NSTimeInterval,
    3.                        options options: UIViewAnimationOptions,
    4.                     animations animations: () -> Void,
    5.                     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を変更するのかな良いでしょう。これは一番はじめの例の通りです。 

    1. // アニメーション実行
    2. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
    3.  
    4.     // myViewの中心点y座標を変更
    5.     self.myView.center.y = 100
    6.             
    7. }) { (complete) in
    8.  
    9.     // アニメーションが完了したら、myViewの背景色を赤色に
    10.     self.myView.backgroundColor = UIColor.redColor()           
    11. }

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

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

    1. // アニメーション実行
    2. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
    3.  
    4.     // サイズ変更
    5.     // transform
    6.     let transform = CGAffineTransformMakeScale(2.0, 2.0)
    7.     self.myView.transform = transform
    8.             
    9. }) { (complete) in
    10.  
    11.     // アニメーションが完了したら、myViewの背景色を赤色に
    12.     self.myView.backgroundColor = UIColor.redColor()           
    13. }

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

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

    1. // アニメーション実行
    2. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
    3.  
    4.     // alpha
    5.     self.myView.alpha = 0.0
    6.             
    7. }) { (complete) in
    8.  
    9.     // アニメーションが完了したら、myViewの背景色を赤色に
    10.     self.myView.backgroundColor = UIColor.redColor()           
    11. }

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

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

    1. // アニメーション実行
    2. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
    3.  
    4.     // 背景色
    5.     self.myView.backgroundColor = UIColor.redColor()
    6.             
    7. }) { (complete) in
    8.  
    9.     // アニメーションが完了したら、myViewの背景色を赤色に
    10.     self.myView.backgroundColor = UIColor.redColor()           
    11. }

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

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

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

    1. // アニメーション実行
    2. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
    3.  
    4.     // 全て指定
    5.     self.myView.center.y = 100
    6.     let transform = CGAffineTransformMakeScale(2.0, 2.0)
    7.     self.myView.transform = transform
    8.     self.myView.alpha = 0.0
    9.     self.myView.backgroundColor = UIColor.redColor()
    10.             
    11. }) { (complete) in
    12.  
    13.     // アニメーションが完了したら、myViewの背景色を赤色に
    14.     self.myView.backgroundColor = UIColor.redColor()           
    15. }

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

    0 件のコメント :

    コメントを投稿

    登録: コメントの投稿 ( Atom )