Successfully reported this slideshow.

Core Graphics & Core Animation

10,488 views

Published on

Published in: Technology, Travel
  • Be the first to comment

Core Graphics & Core Animation

  1. 1. Core Graphic &Core Animation Andreas Blick @aquarioverde
  2. 2. Agenda • Introduction / Overview • Core Graphics / Quartz2D • Explanation • Demo • Core Animation • Explanation • DemoCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  3. 3. Why? • User Experience • Extra polish • Visual Feedback • More human, more natural, real life • User guiding • UsabilityCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  4. 4. Quartz2D • Quartz2D forms part of the Core Graphics Framework • They are often interchanged synonymously • 2D text and and graphics rendering library • C based APICG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  5. 5. Architecture UIKit Core Animation Open GL Core Graphics GPUCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  6. 6. drawRect • To draw we need a graphics context • Lazy drawing - (void)drawRect:(CGRect)rect { // Drawing code } [self setNeedsDisplay]; [self setNeedsDisplayInRect:(CGRect)invalidRect;CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  7. 7. Demo 1 Draw simple line- (void)drawRect:(CGRect)rect{ CGContextRef context = UIGraphicsGetCurrentContext(); CGRect currentBounds = self.bounds; CGContextSetLineWidth(context, 3.0f); CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor); CGContextMoveToPoint(context, 0.0f, CGRectGetMidY(currentBounds)); CGContextAddLineToPoint(context, CGRectGetMaxX(currentBounds), CGRectGetMidY(currentBounds)); CGContextDrawPath(context, kCGPathStroke);}CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  8. 8. Coordinate Sytem UIView CG(0,0) x y frame: (50,50, 75, 75) bounds: (0, 0, 75, 75) y (0,0) x CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  9. 9. Drawing • Drawing is procedural! • Everything goes in order • Use grahpic states • CGPath vs CGContext CGContextSaveGState(context); CGContextRestoreGState(context);CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  10. 10. Paths • Defined shapes • Lines • Arcs • (Bezier) Curves • Rectangles • Also used for • ClippingCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  11. 11. Drawing • Drawing modes: • Stroke, fill, ... • Line cap and join styles • Round, bevel CGContextBeginPath(context); ... CGContextClosePath(context); CGContextDrawPath(context, kCGPathStroke);CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  12. 12. Context Types • CGPDFContextCreate • CGContextRelease • UIGraphicsBeginImageContext • UIImagePNGRepresentationCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  13. 13. Demo 2 Draw a text with shadow- (void)drawTextInRect:(CGRect)rect{ CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetShadowWithColor(context, CGSizeMake(5.0, 2.0), 3.0, [UIColor grayColor].CGColor); [super drawTextInRect:rect];}CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  14. 14. Transformations • Scaling • Rotation • Translation CGContextTranslateCTM(context, 0.0f, self.frame.size.height); CGContextScaleCTM(context, 1.0f, -1.0f);CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  15. 15. Text Drawing • Using Quartz • Fast but restricted to MacRoman character set • UIKit Alternative • Very slow • Uses UIKit coordinate system! [myString drawAtPoint:CGPointMake(0.0, 0.0) withFont:[UIFont systemFontOfSize:12.0]];CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  16. 16. Demo 3 Draw a gradient buttonCGColorSpaceRef rgbColorSpace = CGColorSpaceCreateDeviceRGB();CGGradientRef buttonGradient = CGGradientCreateWithColorComponents (rgbColorSpace, components, locations, nrOfLocations);CGRect buttonBounds = self.bounds;CGPoint gradientStart = CGPointMake(CGRectGetMidX(buttonBounds), 0.0f);CGPoint gradientEnd = CGPointMake(CGRectGetMidX(buttonBounds), CGRectGetMidY(buttonBounds));CGContextDrawLinearGradient(context, buttonGradient, gradientStart, gradientEnd, 0);CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  17. 17. Pixel aligned drawing • User space vs device space • Drawing uses points instead of pixels! • Float coordinates • Uses half pixel boundary • Path inbetween pixels • Offset half a pixel if necessaryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  18. 18. Pixel aligned drawingCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  19. 19. Pixel aligned drawing (2.0, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  20. 20. Pixel aligned drawing (2.0, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  21. 21. Pixel aligned drawing (2.0, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  22. 22. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  23. 23. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  24. 24. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  25. 25. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  26. 26. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0) FillCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  27. 27. References • Quartz2D Programming Guide • Core Graphics Framework Reference • Cocoa Drawing Guide • Drawing and Printing Guide for iOS • UIKit Function Reference • NSString (UIKit Additions)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  28. 28. Core Animation • Objective C framework for graphics rendering, proyection and animation • Behind the scenes of any UIView • Executed on GPU • Done in background threadCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  29. 29. UIView Animation • Core Animation behind the scenes • Handles all the math • Animatable properties: • center, frame, bounds, color, opacity, ... • Blocks vs. pre iOS4CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  30. 30. Pre iOS 4 • Animate everything that is between begin and commit methods • Duration, animation curve • Repeat count, repeat autoreverse • Delegate to chain animationsCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  31. 31. Demo 4 Pre iOS 4 about view appear[UIView beginAnimations:nil context:NULL];[UIView setAnimationDuration:2.0];[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];self.aboutView.alpha = 1.0;self.aboutView.frame = finalFrame;[UIView commitAnimations];CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  32. 32. Blocks • One line of code (even though a long line) • No delegates/callbacks necessary • SynchronizedCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  33. 33. UIView Transitions • Animations to execute when switching views • Always need a container view • They have a meaning: HIG • Differ from iPad to iPhone • ModalViewControllerCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  34. 34. Demo 6 iPad CurlUp Block[UIView transitionFromView:(self.aboutView) toView:(self.venueView) duration:1.0 options:(UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionShowHideTransitionViews) completion:^(BOOL finished) { }];CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  35. 35. CALayer Animations • Every UIView is backed by a CALayer • QuartzCore framework • No touch support • Slightly higher performance on iOS • Same on MacOS as on iOSCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  36. 36. Layer geometry (0,0) x bounds sublayer position: anchorPoint (0.5, 0.5) yCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  37. 37. Layer geometryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  38. 38. Layer geometryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  39. 39. Layer geometryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  40. 40. Layer Types • CAEAGLLayer • CATiledLayer • CAScrollLayer • CAReplicatorLayer • CAShapeLayer • CAGradientLayerCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  41. 41. CALayer • Key-value compliant • Drawing • Don’t subclass • Use delegates instead • Every layer has a presentation layer • Hit testing to get current positionCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  42. 42. Implicit Animations • Property changes • Animates automatically • 1/4 second • linear • Exception: UIView layer • Animation Transaction • begin, commitCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  43. 43. Explicit Animation • CABasicAnimation • CAKeyframeAnimation • Define animation points and timing • Keypath animation • Animate a layer along a drawn path • CAAnimationGroupCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  44. 44. Explicit Animation • CAMediaTimingFunction • Animation chaining: delegate • animationDidStop:finished: • animationDidStart: • CATransform3D • scale, rotate, translateCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  45. 45. Demo 7 Custom property animationCABasicAnimation *iconAnimation = [CABasicAnimation animationWithKeyPath:@"position"];iconAnimation.delegate = self;iconAnimation.duration = 2.0;iconAnimation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];iconAnimation.removedOnCompletion = NO;iconAnimation.fillMode = kCAFillModeForwards;iconAnimation.toValue = [NSValue valueWithCGPoint:topIcon.layer.position];[theAboutIcon.layer addAnimation:iconAnimation forKey:@"moveBelow"];CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  46. 46. References • Core Animation Programming Guide • Animation Basics • UIView Programming Guide - AnimationsCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
  47. 47. Thank You! @aquarioverde

×