Download - Core Animation 使って見た
![Page 1: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/1.jpg)
第 3 の選択: Core Animation
越智 修司
@ponpoko1968
![Page 2: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/2.jpg)
越智修司 (@ponpoko1968)
• 前半 GM とか SE(2004 年〜 2006 年 )
• FeliCa, 銀行 (i アプリバンキング )
• EAN128 バーコードリーダ
• 最近は専ら開発
• きせかえ多機種展開
• iOS アプリ
• 倖田來未
• ワタナベガールズ
• データ分析
• Cocoa 勉強会関西
• 関西ソーシャルゲーム勉強会
![Page 3: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/3.jpg)
クリップリーダーPDF/ コミックリーダー
![Page 4: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/4.jpg)
勤怠くん
![Page 5: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/5.jpg)
洋ゲー大好き♪
• ゲーマータグ
• ponpoko1968
![Page 6: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/6.jpg)
Core Animation とは
MacOSX/iOS で使用できる
アニメーション
フレームワーク
iOS の UI 部品は Core Animation のラッパ
![Page 7: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/7.jpg)
ポテンシャルの割に使われてない
![Page 8: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/8.jpg)
特徴 その1
• layer = スプライトのような概念
• 画面全体を覆うようなものではない
• layer は階層化できる
• 標準の UI 部品の属性はほとんど animatable
• 位置・大きさ
• 色・透過
• 回転
• ネイティブ UI をシームレスにアニメーションできる
![Page 9: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/9.jpg)
• UI にスパイスを。。。
デモ(1)
![Page 10: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/10.jpg)
たった数行
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;
影
角丸
![Page 11: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/11.jpg)
特徴 その2
トランザクショナル &MVC な
プログラミングモデル
![Page 12: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/12.jpg)
MV(C) +時間
時間 t1 t2
Model
presentation
今の状態未来時点の
あるべき状態
![Page 13: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/13.jpg)
デモ (2)
![Page 14: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/14.jpg)
2 つの属性をアニメーションさせる
時間 t1 t2
content
position
y1
y2
y1
![Page 15: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/15.jpg)
トランザクションの記述例
[CATransaction begin];
CAKeyframeAnimation* animation = [CAKeyframeAnimation :animationWithKeyPath:@"position"];
animation.duration = ANIMATION_DURATION;
animation.values = positions;// 配列
animation.repeatCount = 5; // たとえば5回繰り返す
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[layer addAnimation:animation forKey:nil];
....
[CATransaction commit];
![Page 16: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/16.jpg)
応用例
• Web ラッパーのカットインムービー
![Page 17: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/17.jpg)
Web の画面遷移をフックする方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
Log(@"[%d]request=%@",navigationType,request);
if( navigationType == 0 )
[self startAnimation];
return YES;
}
![Page 18: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/18.jpg)
アニメーションの終了後に実行
[CATransaction setCompletionBlock:^{
if( self._delayedRequest ){
self._owlView.hidden = YES;
[self.webView loadRequest:self._delayedRequest];
}
}];
![Page 19: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/19.jpg)
デモ (3)
![Page 20: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/20.jpg)
課題
オーサリングツールが無い
![Page 21: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/21.jpg)
対策
• 手動でがんばる
• オーサリングツールを作る
• 既存のオーサリングツールが出力する形式をインポートする
• 既存のアニメーション形式
• Flash
• sprite studio
![Page 22: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/22.jpg)
Flash
• もともと Core Animation は Flash を参考にした節がある。
• 相当する描画プリミティブも用意されている
• SWF ファイルをパースするライブラリを用いて、内部データをキーフレームにごとに切り出せば理論上は可能
![Page 23: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/23.jpg)
第 3 の選択:
1. がっつり作って没入型インタフェースを持つアプリ /UI を作る(OpenGLES, Unity,Cocos2D)
2. HTML5+canvas / CSS3
3. 場合によっては Core Animation
![Page 24: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/24.jpg)
まとめ
• 自動で補間してくれるためコード上の記述が簡単
• iOS の UI とシームレス
• 結構強力なアニメーションができる
• GPU 連携(たぶん)しているので軽量
• あらかじめ動きを決めてから、アニメーション刺せるというモデルのため、アクションゲームのキャラクタ表示などには不向き( Web でいうと CSS3 に近いイメージ )
![Page 25: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/25.jpg)
ご清聴ありがとうございました
![Page 26: Core Animation 使って見た](https://reader034.vdocuments.net/reader034/viewer/2022050905/54bb83724a79597d0f8b45c4/html5/thumbnails/26.jpg)
参考文献
• 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