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) ＋時間

時間 t1 t2

Model

presentation

今の状態未来時点の

あるべき状態

デモ (2)

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

時間 t1 t2

content

position

y1

y2

y1

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

[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];

}

}];

デモ (3)

課題

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

対策

• 手動でがんばる

• オーサリングツールを作る

• 既存のオーサリングツールが出力する形式をインポートする

• 既存のアニメーション形式

• 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 使って見た

Technology

Transcript of Core Animation 使って見た