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

25,965 views

Published on

Brief introduction to adding core animation to your iphone application.

Published in: Business, Technology
  • Core Animation is a graphics rendering and animation infrastructure available on both iOS and OS X that you use to animate the views and other visual elements of your app. With Core Animation, most of the work required to draw each frame of an animation is done for you. Core Animation provides a way for developers to produce animated user interfaces via an implicit animation model as well as an "explicit" model. The developer specifies the original and final states of an object, and Core Animation handles interpolation. This allows animated interfaces to be created with relative ease, as no specific code for the animation is required by the developer. Core Animation can animate any visual element, and it provides a unified way of accessing Core Image, Core Video, and the other Quartz technologies. Like the rest of the graphics model, Core Animation can be accelerated by a graphics processor (GPU). For more info please visit http://www.sollylabs.com/ (animation studio)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 11---Bom dia amigos, Venham conhecer nossos Servidores de Mu Online
    Online Season 6 O Jogando.net/mu n
    Fazemos sua Diversão com qualidade,há mais de 5 anos
    Servers ON 24 horas por dia.
    Vários Server esperando por você.Venha se divertir de verdade.
    Venham participar do 6° Megaultrasuperhiper Evento Castle Siege
    Sejam benvindos ao nosso Servidor.
    >>Venhas conhecer o mais novo Servidor o PHOENIX acumulativo,Max Stats 32767.
    >>Kits DIAMOND,Com asas LVL 4,os kits mais fortes e raros do servidor ,venham conferir.
    >>Qual o seu Time ?? Tenha o seu Time do coração no Mu Online.Sets do seu Time preferido
    >>Confiram a nova versão do Shild mais usado no servidor o SHILD POWER v3.
    >> Lançamento do NOVO Supremo Kit Fusion V2 + Kit Mystical Supremo,Kit hiper top,forte e bonito.
    Você só encontra no http://www.jogando.net/mu/
    Facebook: http://www.facebook.com/profile.php?id=100002113910611
    Site http://www.jogando.net/mu/ HYCLEN Divulgadora Oficial !!!
    Tenham todos um bom Domingo !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Core Animation

  1. 1. CORE ANIMATION Animated UIs on the iPhone Monday, October 12, 2009
  2. 2. WHY ANIMATE? Animation brings ‘real world’ feel to user interfaces Provides clues to what is happening in the UI Makes the UI feel more responsive Monday, October 12, 2009
  3. 3. PLEAS DON’T Make your UI Animated just for the sake of animation Monday, October 12, 2009
  4. 4. WHAT IS IT ANYWAY? Compositing Monday, October 12, 2009
  5. 5. WHAT IS IT ANYWAY? Animation Monday, October 12, 2009
  6. 6. WHAT IS IT ANYWAY? Animation Monday, October 12, 2009
  7. 7. WHAT IS IT ANYWAY? Backend for all animation on the iPhone and Mac Monday, October 12, 2009
  8. 8. BACKEND Simple Stuff is very Simple Monday, October 12, 2009
  9. 9. BACKEND Complex Stuff is Possible image from @pagedooley Monday, October 12, 2009
  10. 10. SIMPLE STUFF FIRST - (void)touchesEnded:(NSSet *)touches Begin Animations withEvent:(UIEvent *)event { [UIView beginAnimations:@"imageMove" context:NULL]; CGPoint location = [[touches anyObject] locationInView:self.view]; self.imageView.center = location; [UIView commitAnimations]; } Monday, October 12, 2009
  11. 11. SIMPLE STUFF FIRST - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { [UIView beginAnimations:@"imageMove" context:NULL]; CGPoint location = [[touches anyObject] locationInView:self.view]; self.imageView.center = location; [UIView commitAnimations]; Calculate and set } the new location Monday, October 12, 2009
  12. 12. SIMPLE STUFF FIRST - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { [UIView beginAnimations:@"imageMove" context:NULL]; CGPoint location = [[touches anyObject] locationInView:self.view]; self.imageView.center = location; [UIView commitAnimations]; } Start the animations Monday, October 12, 2009
  13. 13. REAL WORLD USAGE Animate the Search bar into view Monday, October 12, 2009
  14. 14. ANIMATE IN - (IBAction)search { if(nil == self.searchBar.superview) { self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f); [self.view addSubview:self.searchBar]; } [UIView beginAnimations:@"SearchBarMoveIn" context:NULL]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = 0.0f; self.searchBar.frame = frame; [self.searchBar becomeFirstResponder]; [UIView commitAnimations]; } Monday, October 12, 2009
  15. 15. ANIMATE IN - (IBAction)search { if(nil == self.searchBar.superview) { self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f); [self.view addSubview:self.searchBar]; } [UIView beginAnimations:@"SearchBarMoveIn" context:NULL]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = 0.0f; self.searchBar.frame = frame; [self.searchBar becomeFirstResponder]; [UIView commitAnimations]; } Monday, October 12, 2009
  16. 16. ANIMATE IN - (IBAction)search { if(nil == self.searchBar.superview) { self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f); [self.view addSubview:self.searchBar]; } [UIView beginAnimations:@"SearchBarMoveIn" context:NULL]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = 0.0f; self.searchBar.frame = frame; [self.searchBar becomeFirstResponder]; [UIView commitAnimations]; } Monday, October 12, 2009
  17. 17. ANIMATE IN - (IBAction)search { if(nil == self.searchBar.superview) { self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f); [self.view addSubview:self.searchBar]; } [UIView beginAnimations:@"SearchBarMoveIn" context:NULL]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = 0.0f; self.searchBar.frame = frame; [self.searchBar becomeFirstResponder]; [UIView commitAnimations]; } Monday, October 12, 2009
  18. 18. ANIMATE IN - (IBAction)search { if(nil == self.searchBar.superview) { self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f); [self.view addSubview:self.searchBar]; } [UIView beginAnimations:@"SearchBarMoveIn" context:NULL]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = 0.0f; self.searchBar.frame = frame; [self.searchBar becomeFirstResponder]; [UIView commitAnimations]; } Monday, October 12, 2009
  19. 19. ANIMATE IN - (IBAction)search { if(nil == self.searchBar.superview) { self.searchBar.frame = CGRectMake(0.0f, -64.0f, 320.0f, 44.0f); [self.view addSubview:self.searchBar]; } [UIView beginAnimations:@"SearchBarMoveIn" context:NULL]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = 0.0f; self.searchBar.frame = frame; [self.searchBar becomeFirstResponder]; [UIView commitAnimations]; } Monday, October 12, 2009
  20. 20. ANIMATE OUT - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { [self.searchBar resignFirstResponder]; [UIView beginAnimations:@"SearchBarMoveOut" context:nil]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = -CGRectGetHeight(frame); self.searchBar.frame = frame; [UIView commitAnimations]; } Monday, October 12, 2009
  21. 21. ANIMATE OUT - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { [self.searchBar resignFirstResponder]; [UIView beginAnimations:@"SearchBarMoveOut" context:nil]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = -CGRectGetHeight(frame); self.searchBar.frame = frame; [UIView commitAnimations]; } Monday, October 12, 2009
  22. 22. ANIMATE OUT - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { [self.searchBar resignFirstResponder]; [UIView beginAnimations:@"SearchBarMoveOut" context:nil]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = -CGRectGetHeight(frame); self.searchBar.frame = frame; [UIView commitAnimations]; } Monday, October 12, 2009
  23. 23. ANIMATE OUT - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { [self.searchBar resignFirstResponder]; [UIView beginAnimations:@"SearchBarMoveOut" context:nil]; [UIView setAnimationDuration:0.5f]; CGRect frame = self.searchBar.frame; frame.origin.y = -CGRectGetHeight(frame); self.searchBar.frame = frame; [UIView commitAnimations]; } Monday, October 12, 2009
  24. 24. DRAWING ATTENTION Making elements jump out Monday, October 12, 2009
  25. 25. SEARCHING - (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar { [self.gridView animateImagesRelatedTo:searchBar.text]; } Monday, October 12, 2009
  26. 26. ANIMATING IMAGES - (void)animateImagesRelatedTo:(NSString *)term { NSUInteger count = random() % self.gridLayer.images.count; if(count < 1) { count = 1; } for(NSUInteger i = 0;i < count;i++) { NSUInteger index = random() % self.gridLayer.sublayers.count; CALayer *layer = [[self.gridLayer sublayers] objectAtIndex:index]; [layer addAnimation:[self foundAnimation] forKey:@"emphasise"]; } } Monday, October 12, 2009
  27. 27. FOUND ANIMATION - (CAAnimationGroup *)foundAnimation { CAAnimationGroup *foundAnimation = [CAAnimationGroup animation]; CATransform3D zoomTransform = CATransform3DMakeScale(0.75f, 0.75f, 1.0f); CABasicAnimation *zoomOutAnimation = [self zoomOutAnimation:zoomTransform]; CAKeyframeAnimation *flipAnimation = [self flipAnimation:zoomTransform]; CABasicAnimation *zoomInAnimation = [self zoomInAnimation:zoomTransform]; foundAnimation.animations = [NSArray arrayWithObjects:zoomOutAnimation, flipAnimation, zoomInAnimation, nil]; foundAnimation.duration = 2.0f; return foundAnimation; } Monday, October 12, 2009
  28. 28. FOUND ANIMATION - (CAAnimationGroup *)foundAnimation { CAAnimationGroup *foundAnimation = [CAAnimationGroup animation]; CATransform3D zoomTransform = CATransform3DMakeScale(0.75f, 0.75f, 1.0f); CABasicAnimation *zoomOutAnimation = [self zoomOutAnimation:zoomTransform]; CAKeyframeAnimation *flipAnimation = [self flipAnimation:zoomTransform]; CABasicAnimation *zoomInAnimation = [self zoomInAnimation:zoomTransform]; foundAnimation.animations = [NSArray arrayWithObjects:zoomOutAnimation, flipAnimation, zoomInAnimation, nil]; foundAnimation.duration = 2.0f; return foundAnimation; } Monday, October 12, 2009
  29. 29. FOUND ANIMATION - (CAAnimationGroup *)foundAnimation { CAAnimationGroup *foundAnimation = [CAAnimationGroup animation]; CATransform3D zoomTransform = CATransform3DMakeScale(0.75f, 0.75f, 1.0f); CABasicAnimation *zoomOutAnimation = [self zoomOutAnimation:zoomTransform]; CAKeyframeAnimation *flipAnimation = [self flipAnimation:zoomTransform]; CABasicAnimation *zoomInAnimation = [self zoomInAnimation:zoomTransform]; foundAnimation.animations = [NSArray arrayWithObjects:zoomOutAnimation, flipAnimation, zoomInAnimation, nil]; foundAnimation.duration = 2.0f; return foundAnimation; } Monday, October 12, 2009
  30. 30. FOUND ANIMATION - (CAAnimationGroup *)foundAnimation { CAAnimationGroup *foundAnimation = [CAAnimationGroup animation]; CATransform3D zoomTransform = CATransform3DMakeScale(0.75f, 0.75f, 1.0f); CABasicAnimation *zoomOutAnimation = [self zoomOutAnimation:zoomTransform]; CAKeyframeAnimation *flipAnimation = [self flipAnimation:zoomTransform]; CABasicAnimation *zoomInAnimation = [self zoomInAnimation:zoomTransform]; foundAnimation.animations = [NSArray arrayWithObjects:zoomOutAnimation, flipAnimation, zoomInAnimation, nil]; foundAnimation.duration = 2.0f; return foundAnimation; } Monday, October 12, 2009
  31. 31. 3 PART ANIMATION Monday, October 12, 2009
  32. 32. 3 PART ANIMATION Monday, October 12, 2009
  33. 33. ZOOM OUT ANIMATION - (CABasicAnimation *)zoomOutAnimation:(CATransform3D)zoomTransform { CABasicAnimation *zoomOutAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; zoomOutAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; zoomOutAnimation.toValue = [NSValue valueWithCATransform3D:zoomTransform]; zoomOutAnimation.duration = 0.5f; return zoomOutAnimation; } Monday, October 12, 2009
  34. 34. ZOOM OUT ANIMATION - (CABasicAnimation *)zoomOutAnimation:(CATransform3D)zoomTransform { CABasicAnimation *zoomOutAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; zoomOutAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; zoomOutAnimation.toValue = [NSValue valueWithCATransform3D:zoomTransform]; zoomOutAnimation.duration = 0.5f; return zoomOutAnimation; } Monday, October 12, 2009
  35. 35. ZOOM OUT ANIMATION - (CABasicAnimation *)zoomOutAnimation:(CATransform3D)zoomTransform { CABasicAnimation *zoomOutAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; zoomOutAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; zoomOutAnimation.toValue = [NSValue valueWithCATransform3D:zoomTransform]; zoomOutAnimation.duration = 0.5f; return zoomOutAnimation; } Monday, October 12, 2009
  36. 36. FLIP ANIMATION - (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform { CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; flipAnimation.beginTime = 0.5f; CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f}; CATransform3D flipTransform1 = CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform2 = CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform3 = CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform4 = CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); flipAnimation.values = [NSArray arrayWithObjects: [NSValue valueWithCATransform3D:zoomTransform], [NSValue valueWithCATransform3D:flipTransform1], [NSValue valueWithCATransform3D:flipTransform2], [NSValue valueWithCATransform3D:flipTransform3], [NSValue valueWithCATransform3D:flipTransform4], [NSValue valueWithCATransform3D:zoomTransform], nil]; flipAnimation.duration = 1.0f; return flipAnimation; } Monday, October 12, 2009
  37. 37. FLIP ANIMATION - (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform { CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; flipAnimation.beginTime = 0.5f; CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f}; CATransform3D flipTransform1 = CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform2 = CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform3 = CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform4 = CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); flipAnimation.values = [NSArray arrayWithObjects: [NSValue valueWithCATransform3D:zoomTransform], [NSValue valueWithCATransform3D:flipTransform1], [NSValue valueWithCATransform3D:flipTransform2], [NSValue valueWithCATransform3D:flipTransform3], [NSValue valueWithCATransform3D:flipTransform4], [NSValue valueWithCATransform3D:zoomTransform], nil]; flipAnimation.duration = 1.0f; return flipAnimation; } Monday, October 12, 2009
  38. 38. FLIP ANIMATION - (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform { CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; flipAnimation.beginTime = 0.5f; CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f}; CATransform3D flipTransform1 = CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform2 = CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform3 = CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform4 = CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); flipAnimation.values = [NSArray arrayWithObjects: [NSValue valueWithCATransform3D:zoomTransform], [NSValue valueWithCATransform3D:flipTransform1], [NSValue valueWithCATransform3D:flipTransform2], [NSValue valueWithCATransform3D:flipTransform3], [NSValue valueWithCATransform3D:flipTransform4], [NSValue valueWithCATransform3D:zoomTransform], nil]; flipAnimation.duration = 1.0f; return flipAnimation; } Monday, October 12, 2009
  39. 39. FLIP ANIMATION - (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform { CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; flipAnimation.beginTime = 0.5f; CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f}; CATransform3D flipTransform1 = CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform2 = CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform3 = CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform4 = CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); flipAnimation.values = [NSArray arrayWithObjects: [NSValue valueWithCATransform3D:zoomTransform], [NSValue valueWithCATransform3D:flipTransform1], [NSValue valueWithCATransform3D:flipTransform2], [NSValue valueWithCATransform3D:flipTransform3], [NSValue valueWithCATransform3D:flipTransform4], [NSValue valueWithCATransform3D:zoomTransform], nil]; flipAnimation.duration = 1.0f; return flipAnimation; } Monday, October 12, 2009
  40. 40. FLIP ANIMATION - (CAKeyframeAnimation *)flipAnimation:(CATransform3D) zoomTransform { CAKeyframeAnimation *flipAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; flipAnimation.beginTime = 0.5f; CGFloat rotationVector[3] = {1.0f, 1.0f, 0.0f}; CATransform3D flipTransform1 = CATransform3DRotate(zoomTransform, 1.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform2 = CATransform3DRotate(zoomTransform, 2.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform3 = CATransform3DRotate(zoomTransform, 3.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); CATransform3D flipTransform4 = CATransform3DRotate(zoomTransform, 4.0f * M_PI / 2.0f, rotationVector[0], rotationVector[1], rotationVector[2]); flipAnimation.values = [NSArray arrayWithObjects: [NSValue valueWithCATransform3D:zoomTransform], [NSValue valueWithCATransform3D:flipTransform1], [NSValue valueWithCATransform3D:flipTransform2], [NSValue valueWithCATransform3D:flipTransform3], [NSValue valueWithCATransform3D:flipTransform4], [NSValue valueWithCATransform3D:zoomTransform], nil]; flipAnimation.duration = 1.0f; return flipAnimation; } Monday, October 12, 2009
  41. 41. ZOOM IN ANIMATION - (CABasicAnimation *)zoomInAnimation:(CATransform3D)zoomTransform { CABasicAnimation *zoomInAnimation = [CABasicAnimation animationWithKeyPath:@"transform"]; zoomInAnimation.beginTime = 1.5f; zoomInAnimation.fromValue = [NSValue valueWithCATransform3D:zoomTransform]; zoomInAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; zoomInAnimation.duration = 0.5f; return zoomInAnimation; } Monday, October 12, 2009
  42. 42. RUN THE CODE Monday, October 12, 2009
  43. 43. THANKS Pragmatic iPhone Studio Monday, October 12, 2009

×