Core Graphics & Core Animation

Core Graphic
&
Core Animation

Andreas Blick
@aquarioverde

Agenda
• Introduction / Overview

• Core Graphics / Quartz2D

• Explanation

• Demo

• Core Animation

• Explanation

• Demo

CG & CA 19/11/2011 - Barcelona Develper Conference @aquarioverde

Why?
• User Experience

• Extra polish

• Visual Feedback

• More human, more natural, real life

• User guiding

• Usability


Quartz2D

• Quartz2D forms part of the Core Graphics
Framework

• They are often interchanged synonymously

• 2D text and and graphics rendering library

• C based API


Architecture
UIKit

Core Animation

Open GL Core Graphics

GPU


drawRect
• To draw we need a graphics context
• Lazy drawing
- (void)drawRect:(CGRect)rect
{
// Drawing code
}

[self setNeedsDisplay];
[self setNeedsDisplayInRect:(CGRect)invalidRect;


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);
}


Coordinate Sytem
UIView CG
(0,0) x y
frame: (50,50, 75, 75)
bounds: (0, 0, 75, 75)

y (0,0) x

Drawing
• Drawing is procedural!

• Everything goes in order

• Use grahpic states

• CGPath vs CGContext

CGContextSaveGState(context);
CGContextRestoreGState(context);


Paths
• Deﬁned shapes

• Lines

• Arcs

• (Bezier) Curves

• Rectangles

• Also used for

• Clipping


Drawing
• Drawing modes:
• Stroke, ﬁll, ...
• Line cap and join styles
• Round, bevel
CGContextBeginPath(context);
...
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathStroke);


Context Types

• CGPDFContextCreate
• CGContextRelease
• UIGraphicsBeginImageContext
• UIImagePNGRepresentation


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];
}


Transformations

• Scaling

• Rotation

• Translation

CGContextTranslateCTM(context, 0.0f, self.frame.size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);


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]];


Demo 3
Draw a gradient button

CGColorSpaceRef 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);


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 necessary


(2.0, 0.0)


(2.0, 0.0) (4.5, 0.0)


(2.0, 0.0) (4.5, 0.0)

Fill


References
• Quartz2D Programming Guide
• Core Graphics Framework Reference
• Cocoa Drawing Guide
• Drawing and Printing Guide for iOS
• UIKit Function Reference
• NSString (UIKit Additions)

Core Animation

• Objective C framework for graphics rendering,
proyection and animation

• Behind the scenes of any UIView

• Executed on GPU

• Done in background thread


UIView Animation

• Core Animation behind the scenes
• Handles all the math
• Animatable properties:
• center, frame, bounds, color, opacity, ...
• Blocks vs. pre iOS4

Pre iOS 4

• Animate everything that is between begin and
commit methods

• Duration, animation curve

• Repeat count, repeat autoreverse

• Delegate to chain animations


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];


Blocks

• One line of code (even though a long line)

• No delegates/callbacks necessary

• Synchronized


UIView Transitions

• Animations to execute when switching views

• Always need a container view

• They have a meaning: HIG

• Differ from iPad to iPhone

• ModalViewController


Demo 6
iPad CurlUp Block

[UIView transitionFromView:(self.aboutView)
toView:(self.venueView)
duration:1.0
options:(UIViewAnimationOptionTransitionCurlDown |
UIViewAnimationOptionShowHideTransitionViews)
completion:^(BOOL finished) {
}];


CALayer Animations

• Every UIView is backed by a CALayer
• QuartzCore framework
• No touch support
• Slightly higher performance on iOS
• Same on MacOS as on iOS

Layer geometry
(0,0) x

bounds

sublayer

position:
anchorPoint (0.5, 0.5)

y

Layer geometry


Layer Types
• CAEAGLLayer

• CATiledLayer

• CAScrollLayer

• CAReplicatorLayer

• CAShapeLayer

• CAGradientLayer


CALayer
• Key-value compliant
• Drawing
• Don’t subclass
• Use delegates instead
• Every layer has a presentation layer
• Hit testing to get current position

Implicit Animations
• Property changes

• Animates automatically

• 1/4 second

• linear

• Exception: UIView layer

• Animation Transaction

• begin, commit


Explicit Animation
• CABasicAnimation

• CAKeyframeAnimation

• Deﬁne animation points and timing

• Keypath animation

• Animate a layer along a drawn path

• CAAnimationGroup


Explicit Animation
• CAMediaTimingFunction

• Animation chaining: delegate

• animationDidStop:ﬁnished:

• animationDidStart:

• CATransform3D

• scale, rotate, translate


Demo 7
Custom property animation

CABasicAnimation *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"];


References

• Core Animation Programming Guide
• Animation Basics
• UIView Programming Guide - Animations


Core Graphics & Core Animation

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Core Graphics & Core Animation

Similar to Core Graphics & Core Animation (20)

Recently uploaded

Recently uploaded (20)

Core Graphics & Core Animation

Editor's Notes