Core Animation 使って見た

1,048 views

Published on

社内発表会でのCore Animationの紹介

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,048
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ponpokoCA デモ
  • SweetHome のスイッピーのアニメーション
  • WebView の遷移
  • Core Animation 使って見た

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

    ×