ブロックチェーン・AI・システム開発の株式会社INDETAIL

iOSでアニメーションを行う方法<UIKit編>

2014.03.31
なめ橋

初めまして。当社でアプリ開発を行っている、新人エンジニアのなめ橋です。
これから、開発で覚えた技術的なことや気になったニュースなどを記事にしていきたいと思います。
わかりやすくて面白く、読み応えのあるブログにできるよう頑張りますので、宜しくお願いします。

UIKitを用いたAnimationの方法

第1回目の今回は、iOSでアニメーションを行う方法についてです。

私自身、今までもiOSでのアプリ開発は行ってきたのですがアニメーションに関してはほとんど触れることがありませんでした。
今回、担当したプロジェクトでアニメーション作成に携わることとなったので、勉強したことをまとめていこうと思います。

iOSでアニメーションを行うには何種類か方法があるのですが、
まずは1番簡単なUIKitを使う方法から始めてみます。

STEP.1 プロジェクトを作成

まずは準備としてアプリケーションプロジェクトを作成します。
Xcodeのバージョンは5.1を使用します。

  1. Xcode→File→New→Projectを選択。
  2. Empty Applicationを選択しプロダクトネームを入力。(今回はTestAnimationとします)
  3. 作成できたら、プロジェクトの上で右クリックしNew Fileを選択。
  4. Objective-C classを選択し、SuperClassにViewControllerを指定した後with XIBにチェックを入れクラスを作成。(今回はAnimationViewとします)
  5. AnimationViewをAppDelegateに宣言し、windowのrootViewControllerに設定。

5番目の段階で、APPDelegateはこのようになります。

これで実行したところ、XIBによって作成した画面が表示されました。

STEP.2 LabelとButtonの作成

次に、XIBを利用してLabelとButtonをViewに配置します。

スクリーンショット 2014-03-20 15.03.35
こんな感じになるはずです。
配置完了後、LabelをAnimationView.hにプロパティとして宣言いたします。
XIB上のLabelを右クリックし、そのままAnimationView.hかAnimationView.mにドラッグし変数名を入力してください。(今回はmoveLabelとしました。)
同じように、ButtonのTouch Up Insideイベントも定義します。
今回はanimationStartという名前で宣言しました。

この段階でAnimationView.hとAnimationView.mファイルはこのようになります。
AnimationView.h

AnimationView.m

STEP.3 アニメーションの作成

いよいよ本題です。アニメーションを作成してみます。
今回作成するアニメーションはLabelの位置を移動させるという最も単純なアニメーションです。
ネタバレになってしまいますが先にコードを見てみます。

これだけです。
上記をSTEP.2で作成したButtonのイベントハンドラに定義することで、ボタンを押下するとアニメーションが実行されます。
この方法は複数あるアニメーション作成方法の中で、おそらく一番簡単かつ細かな設定が可能なアニメーションを行う方法です。

メソッド解説

それでは詳しく見てみましょう。

まず、このanimateKeyframesWithDuration:delay:options:^animations:^completion:メソッドはiOS7から対応しています。
それ以前のOSバージョンではこの方法によるアニメーションは実行できないので注意が必要です。
引数は以下のようになっております。

  • 第一引数(animateKeyframesWithDuration):アニメーションを行う時間
  • 第二引数(delay)            :遅延時間
  • 第三引数(options)            :アニメーション加減速を制御
  • 第四引数(animations)         :アニメーションの内容
  • 第五引数(completion)         :アニメーション終了後の動作

第二引数のdelayは、アニメーションが開始される時間を指定時間だけ遅らせるものです。
第四・第五引数が本メソッドで最も便利になった箇所です。
今までは、アニメーション終了後に特定の動作をさせたいときは、アニメーションの終了を通知するメソッドをオーバーライドし、その中でアニメーションの切り分けをした後、処理を記述する必要がありました。
しかし、このメソッドの登場で切り分けが不要となり、またブロック構文にて「アニメーション処理」と「終了後の処理」が記述可能となったため、コードの可読性が上がりました。
※CABasicAnimationを使用した方法でもブロック構文での処理は可能です。

ひとまず、上記のコードでアニメーションは出来ました。
以下が上記アニメーションの実際の動作になります。
movie1
正直なところ、アニメーションを作成する前は、座標計算や描画関連の設定等が必要なのかなぁ等と考えてましたが想像していたよりも全然簡単に実現することができました。

その他のアニメーションメソッドについて

また、UIViewには他にも以下のようなアニメーションを行うメソッドが用意されております。

  1. animateWithDuration:animations:
    ※アニメーション時間とアニメーション処理を定義
  2. animateWithDuration:animations:completion:
    ※アニメーション時間・アニメーション処理・終了後処理を定義
  3. UIView animateWithDuration: delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:
    ※バネ風のアニメーションを行います。
    usingSpringWithDamping:揺れ動く大きさを指定(0~1)
    initialSpringVelocity:に初速の速さを指定

3番目のメソッドに関しては、バウンドするアニメーションを実装したいときにとても使い勝手がいいと感じました。
実際の動作とコードは以下のようになります。(カクカクで申し訳ありません)

movie2

以上でUIKitを用いたアニメーションの方法を終わります。

なめ橋

2013年4月に入社。 最近ようやくiOSの開発に慣れてきた新人のエンジニアです。 髪が長くなるとなめこに似ているといわれます。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。