SlideShare una empresa de Scribd logo
1 de 22
Descargar para leer sin conexión
Core Animation for iOS
                    ~with blocks helper~




12年11月17日土曜日                               1
Profile
               本名: 吉村 篤
         ネット上: うしお
               所属: wow.inc   Objective-c最高
 トゥイッター : @ushiostarfish
                             C++まあ好き

                             C#とても好き


                             Cocoa勉強中



12年11月17日土曜日                                 2
Point of This Session

        Core Animationの使用法


                   Blocksを使ったTips

               デモ解説


12年11月17日土曜日                        3
デモ


                                  github

               https://github.com/Ushio/SWWDC_CoreAnimation




12年11月17日土曜日                                                  4
Getting Start




12年11月17日土曜日          5
Getting Start




12年11月17日土曜日          6
Display Image




               DisplayImageサンプル




12年11月17日土曜日                      7
CALayer and UIView

                UIView        layerプロパティ(単一)


                         CALayer

                             CALayer
   subLayersプロパティ(配列)
                             CALayer




12年11月17日土曜日                                   8
Implicit or Explicit

           Core AnimationのアニメーションAPI


             Implicit        Explicit
          暗黙的アニメーション      明示的アニメーション

        単純なアニメーション用      複雑なアニメーション用




12年11月17日土曜日                            9
Implicit Animation

          プロパティ代入&KVCだけでアニメーション
                              ImplicitAnimationサンプル




                     ハマりポイント
               UIViewのlayerプロパティのLayerは
                暗黙的アニメーションが効かない
                          明示的アニメーション


12年11月17日土曜日                                          10
CAMediaTimingFunction
           CAMediaTimingFunction functionWithControlPoints::::
                         時間の進み方を定義する

         ex)



   アニメーション                         アニメーション
      時間                              時間




                      実時間                           実時間



12年11月17日土曜日                                                     11
CAMediaTimingFunction
           CAMediaTimingFunction functionWithControlPoints::::
                    (c, d)

                             y+



                 アニメーション
                    時間



                                             x+
                                  実時間
                                             (a, b)
   ※高さ、幅は大きさ1

12年11月17日土曜日                                                     12
Explicit Animation
               CAAnimationサブクラスをCALayerにadd
                                ExplicitAnimationサンプル

               ポイント
                ・明示的アニメーションよりも少し面倒
                ・複雑なアニメーションを作成できる

                         繰り返し、巻き戻り、時間制御...etc




12年11月17日土曜日                                            13
アニメーションのクラス




        WWDC 2011 Session Videos CoreAnimation Essentials より
12年11月17日土曜日                                                   14
Rendering

        UIView : drawRect
                               UIViewの描画は
               CALayer      自身のCALayerに描かれる!


                UIViewの重ね合わせや、drawRectの結果を
                   CALayerでアニメーションできる!

     →標準UI部品をCALayerでガッツリアニメーション
     →UIViewで組み立てたUIをCALayerでガッツリアニメーション


12年11月17日土曜日                                   15
Utilityの解説

                          ExplicitAnimationUtilityサンプル

        blocksを使用したTips
               ・コードが見やすく奇麗に
               ・コピペしやすく再利用しやすい



                →コピーアブルコード


12年11月17日土曜日                                             16
Tips : Animatable
                    アニメーションが可能なプロパティには、
               appleのCALayerリファレンスに「Animatable」の記述




12年11月17日土曜日                                         17
デモプログラムの解説

        フェーズ1   bounds.size.x, bounds.size.y


        フェーズ2   bounds.size.x, bounds.size.y


        フェーズ3   position.y, anchorPoint.y, transform.rotate.z


        フェーズ4   bounds




12年11月17日土曜日                                                    18
anchorPoint




12年11月17日土曜日        19
波の合成


                   ×



               =

12年11月17日土曜日           20
まとめ
               いままでUIViewだけしか使わなかった
                 なんだかCoreAnimation難しい




   どんどんCoreAnimationを使おう!


12年11月17日土曜日                            21
ご清聴ありがとうございました




12年11月17日土曜日             22

Más contenido relacionado

Destacado

La espiral de la tercera ley de kepler. Astronomía, Sistema Solar, Tierra
La espiral de la tercera ley de kepler. Astronomía, Sistema Solar, TierraLa espiral de la tercera ley de kepler. Astronomía, Sistema Solar, Tierra
La espiral de la tercera ley de kepler. Astronomía, Sistema Solar, TierraJorge Diderot Chelén Franulic
 
Real timeimageprocessing
Real timeimageprocessingReal timeimageprocessing
Real timeimageprocessingushiostarfish _
 
静的リンクライブラリ
静的リンクライブラリ静的リンクライブラリ
静的リンクライブラリushiostarfish _
 
Programmer @jc-21 2014/03/29
Programmer @jc-21 2014/03/29Programmer @jc-21 2014/03/29
Programmer @jc-21 2014/03/29Yuki Higuchi
 
Blur based Weber–Fechner law
Blur based Weber–Fechner lawBlur based Weber–Fechner law
Blur based Weber–Fechner lawushiostarfish _
 
2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭
2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭
2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭tototti
 
いろいろ迷子のレンダラー Lost Child Render
いろいろ迷子のレンダラー Lost Child Renderいろいろ迷子のレンダラー Lost Child Render
いろいろ迷子のレンダラー Lost Child Renderushiostarfish _
 
ARC環境で メモリリークを起こす 7つの方法
ARC環境で メモリリークを起こす 7つの方法ARC環境で メモリリークを起こす 7つの方法
ARC環境で メモリリークを起こす 7つの方法ushiostarfish _
 
ハレとケ展 現場のUnity
ハレとケ展 現場のUnityハレとケ展 現場のUnity
ハレとケ展 現場のUnityushiostarfish _
 

Destacado (11)

La espiral de la tercera ley de kepler. Astronomía, Sistema Solar, Tierra
La espiral de la tercera ley de kepler. Astronomía, Sistema Solar, TierraLa espiral de la tercera ley de kepler. Astronomía, Sistema Solar, Tierra
La espiral de la tercera ley de kepler. Astronomía, Sistema Solar, Tierra
 
Real timeimageprocessing
Real timeimageprocessingReal timeimageprocessing
Real timeimageprocessing
 
静的リンクライブラリ
静的リンクライブラリ静的リンクライブラリ
静的リンクライブラリ
 
Programmer @jc-21 2014/03/29
Programmer @jc-21 2014/03/29Programmer @jc-21 2014/03/29
Programmer @jc-21 2014/03/29
 
Lt cocoa
Lt cocoaLt cocoa
Lt cocoa
 
Blur based Weber–Fechner law
Blur based Weber–Fechner lawBlur based Weber–Fechner law
Blur based Weber–Fechner law
 
2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭
2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭
2013-07-12 (金) レッツゴーデベロッパー変真 前夜祭
 
いろいろ迷子のレンダラー Lost Child Render
いろいろ迷子のレンダラー Lost Child Renderいろいろ迷子のレンダラー Lost Child Render
いろいろ迷子のレンダラー Lost Child Render
 
Metal Fluid Simulation
Metal Fluid SimulationMetal Fluid Simulation
Metal Fluid Simulation
 
ARC環境で メモリリークを起こす 7つの方法
ARC環境で メモリリークを起こす 7つの方法ARC環境で メモリリークを起こす 7つの方法
ARC環境で メモリリークを起こす 7つの方法
 
ハレとケ展 現場のUnity
ハレとケ展 現場のUnityハレとケ展 現場のUnity
ハレとケ展 現場のUnity
 

SWWDC2012_11_17

  • 1. Core Animation for iOS ~with blocks helper~ 12年11月17日土曜日 1
  • 2. Profile 本名: 吉村 篤 ネット上: うしお 所属: wow.inc Objective-c最高 トゥイッター : @ushiostarfish C++まあ好き C#とても好き Cocoa勉強中 12年11月17日土曜日 2
  • 3. Point of This Session Core Animationの使用法 Blocksを使ったTips デモ解説 12年11月17日土曜日 3
  • 4. デモ github https://github.com/Ushio/SWWDC_CoreAnimation 12年11月17日土曜日 4
  • 7. Display Image DisplayImageサンプル 12年11月17日土曜日 7
  • 8. CALayer and UIView UIView layerプロパティ(単一) CALayer CALayer subLayersプロパティ(配列) CALayer 12年11月17日土曜日 8
  • 9. Implicit or Explicit Core AnimationのアニメーションAPI Implicit Explicit 暗黙的アニメーション 明示的アニメーション 単純なアニメーション用 複雑なアニメーション用 12年11月17日土曜日 9
  • 10. Implicit Animation プロパティ代入&KVCだけでアニメーション ImplicitAnimationサンプル ハマりポイント UIViewのlayerプロパティのLayerは 暗黙的アニメーションが効かない 明示的アニメーション 12年11月17日土曜日 10
  • 11. CAMediaTimingFunction CAMediaTimingFunction functionWithControlPoints:::: 時間の進み方を定義する ex) アニメーション アニメーション 時間 時間 実時間 実時間 12年11月17日土曜日 11
  • 12. CAMediaTimingFunction CAMediaTimingFunction functionWithControlPoints:::: (c, d) y+ アニメーション 時間 x+ 実時間 (a, b) ※高さ、幅は大きさ1 12年11月17日土曜日 12
  • 13. Explicit Animation CAAnimationサブクラスをCALayerにadd ExplicitAnimationサンプル ポイント ・明示的アニメーションよりも少し面倒 ・複雑なアニメーションを作成できる 繰り返し、巻き戻り、時間制御...etc 12年11月17日土曜日 13
  • 14. アニメーションのクラス WWDC 2011 Session Videos CoreAnimation Essentials より 12年11月17日土曜日 14
  • 15. Rendering UIView : drawRect UIViewの描画は CALayer 自身のCALayerに描かれる! UIViewの重ね合わせや、drawRectの結果を CALayerでアニメーションできる! →標準UI部品をCALayerでガッツリアニメーション →UIViewで組み立てたUIをCALayerでガッツリアニメーション 12年11月17日土曜日 15
  • 16. Utilityの解説 ExplicitAnimationUtilityサンプル blocksを使用したTips ・コードが見やすく奇麗に ・コピペしやすく再利用しやすい →コピーアブルコード 12年11月17日土曜日 16
  • 17. Tips : Animatable アニメーションが可能なプロパティには、 appleのCALayerリファレンスに「Animatable」の記述 12年11月17日土曜日 17
  • 18. デモプログラムの解説 フェーズ1 bounds.size.x, bounds.size.y フェーズ2 bounds.size.x, bounds.size.y フェーズ3 position.y, anchorPoint.y, transform.rotate.z フェーズ4 bounds 12年11月17日土曜日 18
  • 20. 波の合成 × = 12年11月17日土曜日 20
  • 21. まとめ いままでUIViewだけしか使わなかった なんだかCoreAnimation難しい どんどんCoreAnimationを使おう! 12年11月17日土曜日 21