Core Animation for the Masses

Slides for 360iDev 2015 talk on Core Animation.

See example apps:
https://github.com/corvino/LayerExplorer
https://github.com/corvino/AnimationTiming
https://github.com/corvino/AnimationShowcase

Transcript

1. Core Animation for the Masses Nathan Corvino August 17, 2015
2. Why Core Animation?
3. #define DURATION (1.2) @interface ViewController () { NSTimer *animationTimer; NSInteger animationCount; NSInteger numberIterations; CGPoint startPosition; CGPoint endPosition; } @end
4. @implementation ViewController - (IBAction)doAnimation:(id)sender { animationTimer = [NSTimer scheduledTimerWithTimeInterval:1./60. target:self selector:@selector(updateAnimation:) userInfo:nil repeats:YES]; animationCount = 0; numberIterations = 60. * DURATION; startPosition = self.targetView.frame.origin; if (50. == startPosition.x) { endPosition = self.bottomRight; } else { endPosition = CGPointMake(50., 50.); } }
5. - (void)updateAnimation:(id)timer { animationCount++; if (numberIterations == animationCount) { [animationTimer invalidate]; } CGRect targetFrame = self.targetView.frame; CGFloat endWeight = 1. * animationCount / numberIterations; CGFloat startWeight = 1. - endWeight; targetFrame.origin = CGPointMake( startWeight * startPosition.x + endWeight * endPosition.x, startWeight * startPosition.y + endWeight * endPosition.y); self.targetView.frame = targetFrame; } @end
6. Core Animation @implementation ViewController - (IBAction)doAnimation:(id)sender { [UIView animateWithDuration:1.2 delay:0. options:UIViewAnimationOptionCurveLinear animations:^{ CGRect targetFrame = self.targetView.frame; if (50. == targetFrame.origin.x) { targetFrame.origin = self.bottomRight; } else { targetFrame.origin = CGPointMake(50., 50.); } self.targetView.frame = targetFrame; } completion:^(BOOL finished) {}]; } @end
7. Core Animation @implementation ViewController - (IBAction)doAnimation:(id)sender { [UIView animateWithDuration:1.2 animations:^{ CGRect targetFrame = self.targetView.frame; if (50. == targetFrame.origin.x) { targetFrame.origin = self.bottomRight; } else { targetFrame.origin = CGPointMake(50., 50.); } self.targetView.frame = targetFrame; }]; } @end
9. Core Animation Turtles all the Way Down…
10. Layer Kit
11. CALayer
12. Geometry • affineTransform • anchorPoint • bounds • frame • position • transform • zPosition
13. Demo
14. Visual Effects • backgroundColor • backgroundFilters • borderColor • borderWidth • contentsCenter • contentsGravity • cornerRadius • hidden • mask • masksToBounds • opacity • shadowColor • shadowOpacity • shadowPath • shadowRadius
15. Content • CALayer content property • -[UIView drawRect:] • - [CALayerDelegate drawLayer:inContext:]
16. Animating
17. UIView Animations [UIView animateWithDuration:1.0 animations:^{ … }]; [UIView animateWithDuration:1.2 delay:0. options:UIViewAnimationOptionCurveEaseInOut animations:^{ … } completion:^(BOOL finished) { … }];
18. Auto Layout • - [UIView layoutIfNeeded]
19. CGRect targetFrame = self.targetView.frame; CGFloat endWeight = 1. * animationCount / numberIterations; CGFloat startWeight = 1. - endWeight; targetFrame.origin = CGPointMake( startWeight * startPosition.x + endWeight * endPosition.x, startWeight * startPosition.y + endWeight * endPosition.y); self.targetView.frame = targetFrame; Interpolation
20. Timing • Linear • EaseIn • EaseOut • EaseIn-EaseOut • Default • Custom
21. Demo
22. Implicit Animations • CALayer: • - (NSDictionary *) actions • CATransaction • + setDisableActions:(BOOL)
23. Explicit Animations • CABasicAnimation • CAAnimationGroup • CAKeyFrameAnimation
24. CABasicAnimation CABasicAnimation *theAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"]; theAnimation.fromValue = [NSValue valueWithCGRect:self.targetView.bounds]; theAnimation.toValue = [NSValue valueWithCGRect:newBounds]; theAnimation.duration = 1.2; [self.targetView.layer addAnimation:theAnimation forKey:@"AnimateFrame"]; self.targetView.bounds = newBounds;
25. Running Animations • CALayer • - removeAllAnimations • - removeAnimationForKey • animationKeys • presentationLayer
26. Key Frame Animations 1 2 3 4 5
27. Key Frame Animations
28. CAKeyframeAnimation CGImageRef images[N]; // load the images... CAKeyframeAnimation *animation = [CAKeyframeAnimation animation]; animation.keyPath = @"contents"; animation.duration = 1; animation.calculationMode = kCAAnimationDiscrete; animation.repeatCount = HUGE_VALF; animation.values = @[(__bridge id)images[1], (__bridge id)images[2] /* , ... */ ]; [layer addAnimation:animation forKey:@"slideshow"];
29. CALayer Subclasses • CAShapeLayer • CATiledLayer • CATextLayer • AV Layers (CACaptureVideoPreviewLayer, AVPlayerLayer, etc.) • CAGradientLayer • CAEmitterLayer • CAEAGLLayer
30. CAShapeLayer CAShapeLayer *shape = [CAShapeLayer layer]; shape.frame = someFrame; shape.strokeColor = [UIColor greenColor].CGColor; shape.lineWidth = 3.; shape.fillColor = [UIColor yellowColor].CGColor; shape.path = CGPathCreateWithEllipseInRect( CGRectMake(0., 0., someFrame.size.width, someFrame.size.height), &CGAffineTransformIdentity);
31. CATiledLayer SomeTiledLayerDelegate *tiledDelegate = [[SomeTiledLayerDelegate alloc] init]; CATiledLayer *tiledLayer = [CATiledLayer layer]; tiledLayer.delegate = tiledDelegate; tiledLayer.frame = CGRectMake(...); tiledLayer.contentsScale = [[UIScreen mainScreen] scale]; @implementation SomeTiledLayerDelegate - (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)context { CGRect box = CGContextGetClipBoundingBox(context); // ... } @end
32. Demo
33. Performance
34. Measure • Instruments • Core Animation • OpenGL ES • Timing
36. Performance • Offscreen Rendering • shouldRasterize • Blending can be relatively expensive
37. Going Further • iOS Core Animation: Advanced Techniques,
 by Nick Lockwood • WWDC Sessions
38. Thanks! • @corvino • nathan@corvino.com • github.com/corvino/LayerExplorer