Your SlideShare is downloading. ×
Core Graphics & Core Animation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Core Graphics & Core Animation

7,422
views

Published on

Published in: Technology, Travel

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,422
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
210
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • draw custom user elements\nbeautiful details\nnot just cool effects\nguides the eye\neasy to use\n\n
  • C based API: needs more coding -> create proper library\nonce you understand the basics its pretty easy\na lot of copy and paste ;-)\n
  • \n
  • graphics context: canvas on which we do our 2D drawing\nthe only place where we can get this context is in our drawRect method\ncontext is set up automatically!\ncalled by the system when needed\n\nsetNeedsDisplayInRect:(CGRect)invalidRect\n\n
  • there’s different context: Bitmap, PDF, Printer ...\nContext, Path, Color, Font, Transformation, ...\nUIColor can be easily converted to CGColor\nUIColor is not the best solution. one should cache colors\nCGXXX helper methods\npainter’s model\n
  • coordinate spaces simplify the drawing code required to create complex interfaces\nthe window represents the base coordinate system\ntransforms convert coordinate systems\nCocoa and Quartz coordinate systems are the same\ndifferent coordinate systems UI & CG\ncoordinate space for CG is flipped\nbounds vs frame\n
  • one can create path using CGPath or CGContext. CGContext is “one-time”, while CGPath saves the path.\nGraphic states are implemented as a stack. I can push and pop as many as I need.\n
  • first define the path then draw it!\npath’ can also be used for other operations, e.g. clipping\n
  • \n
  • The important part when using contexts that are created is that I have to release them!!!\nimage context can be used for cached and repeated drawing\n
  • we use “drawTextInRect” because it handles the actual text drawing (color, spacing, ..)\nwe could do it in “drawRect” but then would have to draw the text ourselves\nparams: context, offset size, blur, color\n
  • use translation for flipping coordinate space\nCTM: current transformation matrix\n
  • no Unicode\n
  • linear gradients and radial gradients\ncan be used for glossy effects\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • vector based drawing model to scale nicely onto the actual pixels of the device\nuser space vs device space \npoints in the user base might not correspond to pixels on the device!\nyou don’t have to care about the device space unless for adjusting anti-aliasing\nscale factor\n\n
  • \n
  • \n
  • Core Animation was designed for the iPhone\nUIKit was designed with Core Animation in mind\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Why should we use CALayers instead of UIView Animation\n
  • frame and bounds as in UIView\nchange of position changes the frame\nif you change the anchor point you’ll move the frame!!\nanchorPoint is the position on which all animation occur\n
  • frame and bounds as in UIView\nchange of position changes the frame\nif you change the anchor point you’ll move the frame!!\nanchorPoint is the position on which all animation occur\n
  • frame and bounds as in UIView\nchange of position changes the frame\nif you change the anchor point you’ll move the frame!!\nanchorPoint is the position on which all animation occur\n
  • CALayer\nCAEAGLLayer \n holds Open GL content\nCATiledLayer \n CALayers have a maximum size\n if you exceed this you can use a CATiledLayer\nCAScrollLayer\n layer for scrolling\n probably never use it because of the powerfulness of UIScrollView\nCAReplicatorLayer\n replicates layers\n use it for particles systems\nCAShapeLayer\n holds a Core Graphics path\n lets you animate between path’ (shapes)\n e.g. used for charts\nCAGradientLayer\n hardware accelerated linear gradients\n fastest way to create a gradient\n \nUIView always returns a CALayer class\nif you want a different kind of layer class you have to overwrite\n\n(Class)layerClass\n{\nreturn [CATiledLayer class];\n}\n\n \n
  • presentation tree shows what actually is on screen\nlayer.presentationLayer\n
  • \n
  • \n
  • [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];\nanimation.toValue = (2 * M_PI) * -2\n\n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Core Graphic &Core Animation Andreas Blick @aquarioverde
    • 2. Agenda • Introduction / Overview • Core Graphics / Quartz2D • Explanation • Demo • Core Animation • Explanation • DemoCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. 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. Architecture UIKit Core Animation Open GL Core Graphics GPUCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. 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. 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. 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. Paths • Defined shapes • Lines • Arcs • (Bezier) Curves • Rectangles • Also used for • ClippingCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. Context Types • CGPDFContextCreate • CGContextRelease • UIGraphicsBeginImageContext • UIImagePNGRepresentationCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. 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. 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. 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. 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. Pixel aligned drawingCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 19. Pixel aligned drawing (2.0, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 20. Pixel aligned drawing (2.0, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 21. Pixel aligned drawing (2.0, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 22. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 23. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 24. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 25. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0)CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 26. Pixel aligned drawing (2.0, 0.0) (4.5, 0.0) FillCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. 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. 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. 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. 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. Blocks • One line of code (even though a long line) • No delegates/callbacks necessary • SynchronizedCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. 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. 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. Layer geometry (0,0) x bounds sublayer position: anchorPoint (0.5, 0.5) yCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 37. Layer geometryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 38. Layer geometryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 39. Layer geometryCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 40. Layer Types • CAEAGLLayer • CATiledLayer • CAScrollLayer • CAReplicatorLayer • CAShapeLayer • CAGradientLayerCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. 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. 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. Explicit Animation • CAMediaTimingFunction • Animation chaining: delegate • animationDidStop:finished: • animationDidStart: • CATransform3D • scale, rotate, translateCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 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. References • Core Animation Programming Guide • Animation Basics • UIView Programming Guide - AnimationsCG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde
    • 47. Thank You! @aquarioverde