Core	  Anima+on	    Jussi	  Pohjolainen	  
UIVIEW	  ANIMATION	  
UIView	  Anima+ons	  •  Several	  view	  proper+es	  can	  be	  animated	         –  Anima+on:	  change	  property	  over	...
Animatable	  Proper+es	  •    frame	  •    bounds	  •    center	  •    transform	       –  Rota+on,	  Scale,	  Move..	  • ...
UIView	  Block	  Methods	  for	  Anima+on	  Animate	  changes	  to	  one	  or	  more	  views	  using	  the	  specified	  du...
Op+ons	  •  Lot	  of	  anima+on	  op+ons	      –  CurveEaseIn,	  out,	  linear	      –  Repeat..	  •  Can	  be	  combined	...
Anima+on	  with	  Blocks	  - (void)viewDidAppear:(BOOL)animated{    [super viewDidAppear:animated];    [UIView animateWith...
CORE	  ANIMATION	  
Core	  Anima+on	  Layer	  	  •  Anima+on	  is	  an	  important	  part	  of	  iOS	  	  •  Add	  QuartzCore	  framework	  to...
Implicit	  Layer	  •  Every	  UIView	  has	  an	  CALayer	      –  When	  UIView	  draws	  itself,	  the	  view	  image	  ...
Explicit	  Layer	  •  To	  create	  a	  explicit	  layer,	  just	  create	  instance	     of	  CALayer	  •  Layer	  has	  ...
Explicit	  Layer	  CALayer* layer = [[CALayer alloc] init];// Setting bounds to layerCGRect bounds = CGRectMake(0.0, 0.0, ...
UIColor,	  CGColorRef	                 UIImage,	  CGImageRef?	  •  QuartzCore	  frame	  and	  Core	  Graphics	     framewo...
Using	  Image	  // Create a UIImageUIImage* layerImage = [UIImage imageNamed:@"dude.png"];// Get underlying CGImageCGImage...
ZPosi+on	  •  Layers	  exist	  in	  hierarchy	      –  Can	  have	  sublayers	      –  Each	  layer	  has	  pointer	  back...
Example	  // Layer 2 will be on top of layer1[layer1 setZPosition:0.0];[layer2 setZPosition:1.0];// Set background color t...
Implicitly	  Animatable	  Proper+es	  •  Several	  CALayer	  proper+es	  are	  implicitly	     animatable	     –  When	  a...
Disable	  implicit	  anima+on	  •  To	  disable	  implicit	  anima+on,	  use	  anima+on	     transac+on	  •  Batch	  anima...
CAANIMATION	  
About	  Anima+on	  •  Anima+on	  object	  changes	  over	  :me	  •  Instruc+on	  set	  that	  can	  be	  added	  to	  a	  ...
Anima+on	  Classes	  •  CAAnima+on	  (Abstract)	     –  CAPropertyAnima+on	  (Abstract)	        •  CABasicAnima:on	       ...
CABasicAnima+on	  •  CABasicAnima+on	  has	  two	  values	     –  fromValue   –  toValue   –  (and	  the	  dura+on	  from	...
Spinning	  Layer	  Example	  // Create CABasicAnimation and inform about the property// we are going to influenceCABasicAn...
CAKeyframeAnima+on	  •  The	  basic	  anima+on	  animates	  from	  one	  value	     to	  second.	  	  •  CAKeyFrameAnima+o...
Move	  Layer	  Example	  CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation    animationWithKeyPath:@"position"];NSMutab...
CAAnima+onGroup	  •  CAAnima+onGroup	  holds	  group	  of	     CAAnima+ons	  •  Several	  anima+ons	  done	  concurrently	...
CAAnima+onGroup	  CAKeyframeAnimation *move =  [CAKeyframeAnimation animationWithKeyPath:@"position"]; ... CABasicAnimatio...
CATransi+on	  •  Transi+on	  of	  layer	  on	  and	  off	  screen	  •  UINaviga+onController	  uses	  CATransi+on	  •  Set	...
iOS Core Animation
iOS Core Animation
iOS Core Animation
iOS Core Animation
iOS Core Animation
Upcoming SlideShare
Loading in …5
×

iOS Core Animation

2,394 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,394
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
51
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

iOS Core Animation

  1. 1. Core  Anima+on   Jussi  Pohjolainen  
  2. 2. UIVIEW  ANIMATION  
  3. 3. UIView  Anima+ons  •  Several  view  proper+es  can  be  animated   –  Anima+on:  change  property  over  +me  •  UIView  does  most  of  the  job  •  Two  ways   –  Block-­‐based  anima:ons  (recommended)   –  Begin/commit  anima+ons    
  4. 4. Animatable  Proper+es  •  frame  •  bounds  •  center  •  transform   –  Rota+on,  Scale,  Move..  •  alpha  •  backgroundColor  •  contentStretch  
  5. 5. UIView  Block  Methods  for  Anima+on  Animate  changes  to  one  or  more  views  using  the  specified  dura5on,  delay,  op5ons,  and  comple5on  handler.+ animateWithDuration:delay:options:animations:completion:Animate  changes  to  one  or  more  views  using  the  specified  dura5on  and  comple5on  handler.  + animateWithDuration:animations:completion:Animate  changes  to  one  or  more  views  using  the  specified  dura5on.+ animateWithDuration:animations:Creates  a  transi5on  anima5on  for  the  specified  container  view.+ transitionWithView:duration:options:animations:completion:Creates  a  transi5on  anima5on  between  the  specified  views  using  the  given  parameters.+ transitionFromView:toView:duration:options:completion:
  6. 6. Op+ons  •  Lot  of  anima+on  op+ons   –  CurveEaseIn,  out,  linear   –  Repeat..  •  Can  be  combined  using  |   –  UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAutoreverse
  7. 7. Anima+on  with  Blocks  - (void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; [UIView animateWithDuration:5.0 animations:^{ [animatingView setAlpha:0]; [animatingView setCenter:CGPointMake(animatingView.center.x+50.0, animatingView.center.y+50.0)]; } completion:^(BOOL finished) { [animatingView removeFromSuperview]; } ];}
  8. 8. CORE  ANIMATION  
  9. 9. Core  Anima+on  Layer    •  Anima+on  is  an  important  part  of  iOS    •  Add  QuartzCore  framework  to  your  project  •  Use  classes     –  CALayer   •  When  drawing  using  layers,  drawing  is  hardware-­‐ accelerated   •  Layer  is  a  buffer  containing  a  bitmap   –  CAAnima+on    
  10. 10. Implicit  Layer  •  Every  UIView  has  an  CALayer   –  When  UIView  draws  itself,  the  view  image  is  in   CALayer  •  View  creates  a  layer:  implicit  layer   –  Matching  view  hierarchy  and  layer  hierarchy  
  11. 11. Explicit  Layer  •  To  create  a  explicit  layer,  just  create  instance   of  CALayer  •  Layer  has  bounds  and  posi+on  •  Posi+on  is  by  default  the  center  of  the  layer.   Uses  coordinates  of  the  superlayer’s   coordinate  system  
  12. 12. Explicit  Layer  CALayer* layer = [[CALayer alloc] init];// Setting bounds to layerCGRect bounds = CGRectMake(0.0, 0.0, 100.0, 100.0);[layer setBounds:bounds];// Setting *center* position to layer (uses superlayers coordinate system)CGPoint position = CGPointMake(50.0, 150.0);[layer setPosition:position];// Setting color to layerUIColor* red = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5];// Cast from UIKit to Core GraphicsCGColorRef redRef = [red CGColor];[layer setBackgroundColor:redRef];[[[self view] layer] addSublayer: layer];
  13. 13. UIColor,  CGColorRef   UIImage,  CGImageRef?  •  QuartzCore  frame  and  Core  Graphics   framework  eist  on  both  iOS  and  Mac  OS  X  •  UIKit  exists  only  on  iOS   –  UIImage,  UIColor  …  •  Due  to  portability  QuartzCore  uses  classes  like   –  CGImageRef,  CGColorRef  •  UIKit  provides  methods  to  access  Core   Craphics  counterparts  
  14. 14. Using  Image  // Create a UIImageUIImage* layerImage = [UIImage imageNamed:@"dude.png"];// Get underlying CGImageCGImageRef image = [layerImage CGImage];// CGImageRef => typecast struct CGImage*// To cast from C-pointer to Objective-C id, we use// __bridge[layer setContents: (__bridge id)(image)];// Fill the layer and maintain the aspect ratio[layer setContentsGravity:kCAGravityResizeAspect];[[[self view] layer] addSublayer: layer];
  15. 15. ZPosi+on  •  Layers  exist  in  hierarchy   –  Can  have  sublayers   –  Each  layer  has  pointer  back  to  its  parent:   superlayer  •  Layer  draws  on  top  of  its  superlayer  •  What  about  siblings  and  overlapping?   –  Layer  has  property  zPosi+on   –  If  siblings  overlap,  layer  with  higher  zPosi+on  is   composed  on  top.  
  16. 16. Example  // Layer 2 will be on top of layer1[layer1 setZPosition:0.0];[layer2 setZPosition:1.0];// Set background color to layer2UIColor* red = [UIColor colorWithRed:1.0 green:0.0 blue:0.0alpha:0.5];CGColorRef redRef = [red CGColor];[layer2 setBackgroundColor:redRef];// add layers as siblings[[[self view] layer] addSublayer: layer1];[[[self view] layer] addSublayer: layer2];
  17. 17. Implicitly  Animatable  Proper+es  •  Several  CALayer  proper+es  are  implicitly   animatable   –  When  a  se?er  is  called,  proper5es  are  animated!   –  Calling  setPosi+on  will  animate  layer  from  a  to  b  •  The  animatable  property  changes  to  its   des+na+on  value  over  constant  +me  interval  •  Changing  property  while  being  animated   starts  another  anima+on:  anima+on  seems   slow    
  18. 18. Disable  implicit  anima+on  •  To  disable  implicit  anima+on,  use  anima+on   transac+on  •  Batch  anima+ons  and  set  there  parameters,   like  dura+on  and  anima+on  curve  •  Set  begin  and  commit  to  CATransac+on  
  19. 19. CAANIMATION  
  20. 20. About  Anima+on  •  Anima+on  object  changes  over  :me  •  Instruc+on  set  that  can  be  added  to  a  CALayer   instance  •  When  instruc+ons  are  added  to  layer,  layer   begins  following  the  instruc+ons  of  the   anima+on.  •  Many  proper+es  can  be  animated:  opacity,   posi+on,  transform,  bounds  …  
  21. 21. Anima+on  Classes  •  CAAnima+on  (Abstract)   –  CAPropertyAnima+on  (Abstract)   •  CABasicAnima:on   •  CAKeyFrameAnima:on   –  CAAnima:onGroup   –  CATransi:on  
  22. 22. CABasicAnima+on  •  CABasicAnima+on  has  two  values   –  fromValue –  toValue –  (and  the  dura+on  from  CAAnimation)  •  Decide  the  property,  then  set  values   fromValue  to  toValue  and  set  dura+on  also  
  23. 23. Spinning  Layer  Example  // Create CABasicAnimation and inform about the property// we are going to influenceCABasicAnimation *spin = [CABasicAnimationanimationWithKeyPath:@"transform.rotation"];// Changes rotation (uses radians)[spin setToValue:[NSNumber numberWithFloat:M_PI*2.0]];// Set duration to one second[spin setDuration:1.0];// Repeat forever[spin setRepeatCount:HUGE_VALF];// Add the animation to layer[_layer1 addAnimation:spin forKey:@"spinAnimation"];
  24. 24. CAKeyframeAnima+on  •  The  basic  anima+on  animates  from  one  value   to  second.    •  CAKeyFrameAnima+on  accepts  many  values,   an  NSArray  of  values.  •  The  NSArray  is  set  as  the  values  property  of  a   CAKeyframeAnima+on  
  25. 25. Move  Layer  Example  CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];NSMutableArray* locations = [NSMutableArray array];// C API (CGPoint is struct)CGPoint loc = CGPointMake(0.0, 0.0);// Cast to Objective-C objectNSValue* value = [NSValue valueWithCGPoint:loc];[locations addObject: value];[locations addObject: [NSValue valueWithCGPoint:CGPointMake(150,150)]];[locations addObject: [NSValue valueWithCGPoint:CGPointMake(100,350)]];[moveAnim setValues: locations];[moveAnim setDuration:5.0];[moveAnim setRepeatCount:HUGE_VALF];
  26. 26. CAAnima+onGroup  •  CAAnima+onGroup  holds  group  of   CAAnima+ons  •  Several  anima+ons  done  concurrently  •  Add  NSArray  of  anima+ons  to   CAAnima+onGroup  and  set  this  to  layer  
  27. 27. CAAnima+onGroup  CAKeyframeAnimation *move = [CAKeyframeAnimation animationWithKeyPath:@"position"]; ... CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; [spin setToValue:[NSNumber numberWithFloat:M_PI*2.0]]; [spin setDuration:1.0]; [spin setRepeatCount:HUGE_VALF]; CAAnimationGroup* group = [CAAnimationGroup animation]; [group setAnimations:[NSArray arrayWithObjects:spin, move, nil]]; [group setDuration:5.0]; [group setRepeatCount:HUGE_VALF];
  28. 28. CATransi+on  •  Transi+on  of  layer  on  and  off  screen  •  UINaviga+onController  uses  CATransi+on  •  Set  type   –  Fade,  MoveIn,  Push,  Reveal  •  Set  subtype  (direc+on)   –  Le`,  right,  up,  boaom  •  And  set  also  dura+on  

×