Core  Anima+on  

Jussi  Pohjolainen  

UIVIEW  ANIMATION  

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  

 

Animatable  Proper+es  

•  frame  •  bounds  •  center  •  transform  – Rota+on,  Scale,  Move..  

•  alpha  •  backgroundColor  •  contentStretch  

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:

Op+ons  

•  Lot  of  anima+on  op+ons  – CurveEaseIn,  out,  linear  – Repeat..  

•  Can  be  combined  using  |  – UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAutoreverse

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];

}

];

}

CORE  ANIMATION  

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  

 

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  

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  

Explicit  Layer   CALayer* layer = [[CALayer alloc] init];

// Setting bounds to layer

CGRect bounds = CGRectMake(0.0, 0.0, 100.0, 100.0);

[layer setBounds:bounds];

// Setting *center* position to layer (uses superlayer's coordinate system)

CGPoint position = CGPointMake(50.0, 150.0);

[layer setPosition:position];

// Setting color to layer

UIColor* red = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5];

// Cast from UIKit to Core Graphics

CGColorRef redRef = [red CGColor];

[layer setBackgroundColor:redRef];

[[[self view] layer] addSublayer: layer];

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  

Using  Image   // Create a UIImage UIImage* layerImage = [UIImage imageNamed:@"dude.png"]; // Get underlying CGImage CGImageRef 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];

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.  

Example  // Layer 2 will be on top of layer1

[layer1 setZPosition:0.0];

[layer2 setZPosition:1.0];

// Set background color to layer2

UIColor* red = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5];

CGColorRef redRef = [red CGColor];

[layer2 setBackgroundColor:redRef];

// add layers as siblings

[[[self view] layer] addSublayer: layer1];

[[[self view] layer] addSublayer: layer2];

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  

 

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  

CAANIMATION  

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  …  

Anima+on  Classes  

•  CAAnima+on  (Abstract)  – CAPropertyAnima+on  (Abstract)  •  CABasicAnima:on  •  CAKeyFrameAnima:on  

– CAAnima:onGroup  – CATransi:on  

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  

Spinning  Layer  Example  // Create CABasicAnimation and inform about the property // we are going to influence CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"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"];

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  

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 object

NSValue* 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];

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  

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];

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