Core Animation 使って見た

第 3 の選択： Core Animation

越智修司

@ponpoko1968

越智修司 (@ponpoko1968)
• 前半 GM とか SE(2004 年〜 2006 年 )

• FeliCa, 銀行 (i アプリバンキング )

• EAN128 バーコードリーダ

• 最近は専ら開発

• きせかえ多機種展開

• iOS アプリ

• 倖田來未

• ワタナベガールズ

• データ分析

• Cocoa 勉強会関西

• 関西ソーシャルゲーム勉強会

クリップリーダー
PDF/ コミックリーダー

洋ゲー大好き♪
• ゲーマータグ
• ponpoko1968

Core Animation とは

MacOSX/iOS で使用できる
アニメーション
フレームワーク
iOS の UI 部品は Core Animation の
ラッパ

ポテンシャルの割に使われてない

特徴その１

• layer = スプライトのような概念

• 画面全体を覆うようなものではない

• layer は階層化できる

• 標準の UI 部品の属性はほとんど animatable

• 位置・大きさ

• 色・透過

• 回転

• ネイティブ UI をシームレスにアニメーションで
きる

デモ（１）
• UI にスパイスを。。。

たった数行
影
targetView.layer.shadowOffset = CGSizeMake(2.0, 2.0);
targetView.layer.shadowColor = [[UIColor blackColor] CGColor];
targetView.layer.shadowOpacity = 0.65;

角丸
targetView.layer.cornerRadius = self.cornerSlider.value;

特徴その２

トランザクショナル &MVC な
プログラミングモデル

MV(C) ＋時間

presentation

Model

未来時点の
今の状態あるべき状態

時間 t1 t2

2 つの属性をアニメーションさせる

content

y1
y1

position

y2

時間 t1 t2

トランザクションの記述例

[CATransaction begin];

CAKeyframeAnimation* animation = [CAKeyframeAnimation ：
animationWithKeyPath:@"position"];

animation.duration = ANIMATION_DURATION;

animation.values = positions;// 配列

animation.repeatCount = 5; // たとえば５回繰り返す

animation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseOut];

[layer addAnimation:animation forKey:nil];

....

[CATransaction commit];

応用例

• Web ラッパーのカットインムービー

Web の画面遷移をフックする方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:
(UIWebViewNavigationType)navigationType

{

Log(@"[%d]request=%@",navigationType,request);

if( navigationType == 0 )

[self startAnimation];

return YES;

}

アニメーションの終了後に実行

[CATransaction setCompletionBlock:^{

if( self._delayedRequest ){

self._owlView.hidden = YES;

[self.webView loadRequest:self._delayedRequest];

}

}];

課題

オーサリングツールが無い

対策

• 手動でがんばる
• オーサリングツールを作る
• 既存のオーサリングツールが出力する形
式をインポートする
• 既存のアニメーション形式
• Flash
• sprite studio

Flash
• もともと Core Animation は Flash を参考にし
た節がある。
• 相当する描画プリミティブも用意されて
いる
• SWF ファイルをパースするライブラリを
用いて、内部データをキーフレームにご
とに切り出せば理論上は可能

第 3 の選択：
1. がっつり作って没入型インタフェー
スを持つアプリ /UI を作る
(OpenGLES, Unity,Cocos2D)
2. HTML5+canvas / CSS3
3. 場合によっては Core Animation

まとめ
• 自動で補間してくれるためコード上の記
述が簡単
• iOS の UI とシームレス
• 結構強力なアニメーションができる
• GPU 連携（たぶん）しているので軽量
• あらかじめ動きを決めてから、アニメー
ション刺せるというモデルのため、アク
ションゲームのキャラクタ表示などには
不向き（ Web でいうと CSS3 に近いイメー
ジ)

ご清聴ありがとうございました

参考文献

• CA360(Core Animation の Demo)
• https://github.com/neror/CA360

• steps to phantasien
• WebKit CSS と core animation の関係
• http://stepped.dodgson.org/?date=20090822

• @nakiwo 氏のスライド
• 「 Core Animation part1 」
• http://www.slideshare.net/yuichi_fujishige/core-animation-part1

• 「 CAKeyframeAnimation 」
• http://www.slideshare.net/yuichi_fujishige/cakeyframeanimation

Core Animation 使って見た

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Similar a Core Animation 使って見た

Similar a Core Animation 使って見た (20)

Último

Último (10)

Core Animation 使って見た

Notas del editor