MOSA Multi-OS Software Artists

MOSAはソフトウェア開発者を支援します

MOSA「iOS基礎技術入門シリーズ」トップへ戻る

Core Animation 入門


 
 

「Core Animation 入門」概要

Core Animation 入門」には、iOSのCore Animationフレームワークに関するサンプルアプリのXcode 5プロジェクトと、それを解説した入門書籍(iBooks対応 67ページのePubファイル)が含まれています。これにより、サンプルアプリ、iBooks用の入門書籍、ソースコードの3点を活用しながらCore Animationの使用方法を習得できます。書籍やサンプルの解説内容はiOS 6までの機能となっていますのでご注意ください。サンプルアプリの開発環境はXcode 5で、起動環境はiOS 6.0以上が搭載されたiPadiPad AiriPad miniとなります。

「Core Animation 入門」目的

iOSアプリを使うと分かりますが、優れたGUIの中心には必ず利用者に対して心地の良いアニメーションが活用されています。まさに「アニメーションを制する者はGUIを制する」と言えるでしょう。こうした状況は、OS Xアプリ(Finderなど)でもまったく同じです。両OSでアニメーション処理の基盤となっているのが、QuartzCoreフレームワークに属する「Core Animation」です。このフレームワークはObjective-CベースでありOS X 10.5から提供されています。アニメーションを実行する仕組みもモダンであり、関連クラスには多数のプロパティ定義がなされています。

Core Animationでアニメーション処理の対象となるのはCALayerクラスです。 実はこのCALayer、iOSとOS Xではシステムへの実装形態が異なります。UIKitUIViewオブジェクトにはデフォルトでCALayerオブジェクトがありますが、AppKitNSViewオブジェクトではnibファイルで指定しない限り、後から追加することになります。本書籍では、Core Animationを使うサンプルソースコードを幾つか紹介し、OS X環境との相違点などにも着目しながら、iOSにおけるCore Animationフレームワーク活用の習得を目指したいと思います。
 
著者:有限会社オッティモ 小池邦人

「Core Animation 入門」書籍の章立て

(1) はじめに
(2) アプリ連携やサンプルソースコードについて
(3) Core Animation関連の技術資料を入手する
(4) Core Animationを使わないアニメーション
(5) UIViewに実装されたアニメーション機能
(6) UIViewとCALayerの関係とその仕組み
(7) Core Animationによるアニメーション
(8) CATransactionとトランザクション管理
(9) アニメーション可能なプロパティの詳細
(10)明示的(Explicit)アニメーションの詳細
(11)開始と終了のプロパティ値を指定する
(12)キーフレームアニメーションの仕組み
(13)トランジションアニメーションの仕組み
(14)CALayerクラスのサブクラスを使う
(15)iOSのアニメーションに関する特記事項
(16)Apple社のサンプルソースコードを試す

サンプルアプリの利用方法

XcodeプロジェクトをビルドしてサンプルアプリをiPadにインストールします。アプリが起動したら、まず最初にポップオーバーに表示されたiBooksアイコンをタップし、iBooks側に「Core Animation 入門」書籍をインストールしてください。インストールが完了するとiBooksが起動して書籍がオープンされます。iPadにiBooksがインストールされていない場合には、App Store経由で先んじてiBooksを入手しておく必要があります。サンプルアプリをiOSシミュレータで起動した場合いは、iBooksが起動できないなど幾つかの機能が制限されますので、ご注意ください。

書籍はePubドキュメントです。本文については、iPad版 iBooksのテーマが「フルスクリーン」、フォント種類が「ヒラギノ明朝」、フォントサイズが「下から3番目」に合わせてレイアウトされています。その設定に変更してからiPadを縦向きにしてお読みください。Mac版 iBooksで読まれる場合には、表示を「単一ページ」に設定してください。

一度登録してしまえば、本文中に設定されているハイパーリンク経由でアプリの指定したデモを起動することが可能です。アプリを起動するハイパーリンクは先頭に「★」が付いています。その箇所のタップでアプリが起動され、リンク先に記載されているデモ内容が実行されます。アプリからはツールバーの「ビューアへ」ボタンをタップすることでiBooksへ戻ることが出来ます。

サンプルソースコードプロジェクトの開発環境はXcode 5です。ビルドして実機にインストールする場合には、Xcodeのプロジェクトターゲット(TARGETS)のGeneralで表示される「Build Identifier」と、Build Settingsの「Code Signing Identity」を正しく再設定してください。アプリの起動対象はiOS 6.0以上であり、iOS 7.0でも問題なく動作させることができます。

サンプルアプリにおけるデモの種類

(1)UIImageViewでのアニメ
(2)ビューコントローラ切換え
(3)UIViewが移動するアニメ
(4)UIViewのアルファ値変更
(5)UIViewのトランジション
(6)UIViewトランスフォーム
(7)Block処理での移動アニメ
(8)Block処理トランジション
(9)Block処理のネスティング
(10)新規CALayerレイアウト
(11)CALayerサブクラス活用
(12)CALayerサブクラス作成
(13)暗黙的なアニメーション
(14)明示的なアニメーション
(15)明示的トランザクション
(16)CALayerプロパティ変更
(17)キーパスを用いるアニメ
(18)キーフレーム活用アニメ
(19)画像を切り換えるアニメ
(20)keyTimesプロパティ活用
(21)トランジション用アニメ
(22)CAShapeLayer 活用
(23)CAGradientLayer 活用
(24)CAReplicatorlayer 活用
(25)CAEmitterLayerの 活用

サンプルアプリのソースコードについて

本サンプルソースコードのMacでの開発環境はXcode 5以上、アプリ動作環境はiOS 6.0以上です。Xcodeプロジェクトに含まれる各クラスの概要は次のとおりです。

MasterViewController」デモ一覧を表示しているビューコントローラ
DetailViewController」起動画面を表示するビューコントローラ
AnimeViewController」Core Animationでアニメを行うビューコントローラ
NextViewController」ビューコントローラのトランジションで表示させる
PrintViewController」タップによるペイント描画デモ用のビューコントローラ
PDFViewController」CATiledLayerでPDFを表示するビューコントローラ
SetupViewController」 アプリの使い方の表示とURLスキームの変更を行う
AboutViewController」 本アプリのアバウトを表示するビューコントローラ
PDFView」PDFを表示するためにCATiledLayerを使うUIViewのサブクラス
PaintView」 タップによるペイント描画デモで用いるUIViewのサブクラス
PaintLayer」タップによるペイント描画デモで用いるCALayerのサブクラス

Core AnimationUIViewを利用したアニメのほとんどはAnimeViewControllerクラスに実装されているselectAnimationメソッド内で実行されています。デモ番号を参照し、そこに記述されているcase文をたどれば、目的のデモを実行しているソースコードにたどり着きます。ビューコントローラが管理しているデモ用のビューやコントロルは初期状態で消されていますので(hiddenプロパティがYES)、そのnibファイルを編集する場合には注意してください。第6章「UIViewとCALayerの関係とその仕組み」におけるPDFの表示(デモ11)はPDFViewControllerクラスに、高速化を施したペン描画(デモ12)については、PaintViewControllerクラスに実装されています。

実際のサンプルソースコードは、本書籍内で紹介されているソースコードと若干異なる場合がありますのでご了承ください(デモ処理に特化するため)。サンプルソースコードには、本書籍での解説のみで、実際には使用していないルーチンやメソッドなども幾つか記述されています。
 

【ご注意】サンプルソースコードの使用権利はフリーです。使えるようであれば、ご自身のソースファイルへコピー&ペースしてご利用ください。ただし、その結果として発生した事象に対しては責任は負いかねますのでご了承ください。