Nacho Soto's Slides at NSSpain 2013

NSSpain is an iOS & OSX developers conference in Spain.
More info: http://nsspain.com

Transcript

1. CREATING ANIMATIONS WITH CORE ANIMATION & CORE GRAPHICS Mobile Lead, MindSnacks Inc. Creator of Sayonara app. Nacho Soto
2. AGENDA Animation types: Basic animations. Animating transforms. Using Paths. Keyframe animations. Mixing things up with Core Graphics: Animating a programmatically drawn view. How to make it fast. • • • • • • • •
3. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(opacity))]; animation.fromValue = @0.0f; animation.toValue = @1.0f; animation.duration = 5; [layer addAnimation:animation forKey:animation.keyPath]; BASIC ANIMATION
4. const CATransform3D transform = CATransform3DMakeScale(1, 0, 0); CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(transform))]; animation.toValue = [NSValue valueWithCATransform3D:transform]; [layer addAnimation:animation forKey:animation.keyPath]; NOT SO BASIC ANIMATION
5. UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:rect]; CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:NSStringFromSelector(@selector(position))]; pathAnimation.path = bezierPath.CGPath; [layer addAnimation:pathAnimation forKey:pathAnimation.keyPath]; PATH ANIMATIONS
6. KEYFRAME ANIMATIONS CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"]; animation.values = [[NSArray arrayWithRange:NSMakeRange(0, 100)] mapUsingBlock:^(NSNumber *number) { return @(pow(number.unsignedIntegerValue, 3) / 3000.f); }];
7. CORE ANIMATION + CORE GRAPHICS
8. WHY IS IT SLOW? I have the newest graphics card!
9. IT’S NOT ALL ABOUT THE GPU CoreGraphics.framework Quartz 2D Quartz Services QuartzCore.framework Core Animation Core Image Rendering occurs in the CPU. Then textures are transferred to VRAM and composited there. We only have 1 / 60s (0.016s) to do all the work.
10. SO HOW DO WE MAKE RENDERING FASTER? DO NOT RENDER
11. NOT RENDERING MEANS CACHING Solution number 1: use stretchable images. • Solution number 2: ? •
12. IDEA: Let’s render all the frames in advance. But, how do we update the layer each frame?
13. SPRITE SHEETS
14. ABOUT ME Currently: Mobile Lead, MindSnacks Inc. Created Sayonara app. Previously: Web and iOS developer at Ticketea. hello@nachosoto.com