Core Animation

25,517 views
25,426 views

Published on

Brief introduction to adding core animation to your iphone application.

Published in: Business, Technology
1 Comment
27 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
25,517
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

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

×