Core Animation

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    9 Favorites

    Core Animation - Presentation Transcript

    1. CORE ANIMATION Animated UIs on the iPhone Monday, October 12, 2009
    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. PLEAS DON’T Make your UI Animated just for the sake of animation Monday, October 12, 2009
    4. WHAT IS IT ANYWAY? Compositing Monday, October 12, 2009
    5. WHAT IS IT ANYWAY? Animation Monday, October 12, 2009
    6. WHAT IS IT ANYWAY? Animation Monday, October 12, 2009
    7. WHAT IS IT ANYWAY? Backend for all animation on the iPhone and Mac Monday, October 12, 2009
    8. BACKEND Simple Stuff is very Simple Monday, October 12, 2009
    9. BACKEND Complex Stuff is Possible image from @pagedooley Monday, October 12, 2009
    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. 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. 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. REAL WORLD USAGE Animate the Search bar into view Monday, October 12, 2009
    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. 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. 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. 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. 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. 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. 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. 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. 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. 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. DRAWING ATTENTION Making elements jump out Monday, October 12, 2009
    25. SEARCHING - (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar { [self.gridView animateImagesRelatedTo:searchBar.text]; } Monday, October 12, 2009
    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. 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. 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. 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. 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. 3 PART ANIMATION Monday, October 12, 2009
    32. 3 PART ANIMATION Monday, October 12, 2009
    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. 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. 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. 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. 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. 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. 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. 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. 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. RUN THE CODE Monday, October 12, 2009
    43. THANKS Pragmatic iPhone Studio Monday, October 12, 2009
    SlideShare Zeitgeist 2009

    + bdudneybdudney Nominate

    custom

    1924 views, 9 favs, 11 embeds more stats

    Brief introduction to adding core animation to your more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1924
      • 1320 on SlideShare
      • 604 from embeds
    • Comments 0
    • Favorites 9
    • Downloads 0
    Most viewed embeds
    • 587 views on http://bill.dudney.net
    • 4 views on http://www.iweb34.com
    • 3 views on http://viruslasalle.blogspot.com
    • 3 views on http://www.praytothemachine.com
    • 1 views on http://www.blogger.com

    more

    All embeds
    • 587 views on http://bill.dudney.net
    • 4 views on http://www.iweb34.com
    • 3 views on http://viruslasalle.blogspot.com
    • 3 views on http://www.praytothemachine.com
    • 1 views on http://www.blogger.com
    • 1 views on http://203.208.37.132
    • 1 views on http://xss.yandex.net
    • 1 views on http://www.slideshare.net
    • 1 views on http://safe.tumblr.com
    • 1 views on http://do-nothing.tumblr.com
    • 1 views on http://translate.googleusercontent.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.