Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Core Animation 使って見た

1,509 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×