Introduction To Core Animation (CocoaConf Chicago March 2015)

Transcript

1. Introduction to Core Animation Nathan Corvino March 27, 2015
2. UIView Animations [UIView animateWithDuration:1.2 animations:^{ self.targetView.bounds = CGRectMake(0., 0., 100., 100.); self.targetView.center = CGPointMake(50., 50); self.targetView.backgroundColor = [UIColor redColor]; self.targetView.alpha = 0.5; }];
4. CALayer • Manage content, geometry, and visual attributes • Content Cache (Bitmap/Texture) • GPU!
5. • anchorPoint • backgroundColor • backgroundFilters • borderColor • borderWidth • bounds • compositingFilter • contents • contentsRect • cornerRadius • doubleSided • filters • hidden • mask • masksToBounds • opacity • position • shadowColor • shadowOffset • shadowOpacity • shadowPath • shadowRadius • sublayers • sublayerTransform • transform • zPosition
6. • anchorPoint • backgroundColor • backgroundFilters • borderColor • borderWidth • bounds • compositingFilter • contents • contentsRect • cornerRadius • doubleSided • filters • hidden • mask • masksToBounds • opacity • position • shadowColor • shadowOffset • shadowOpacity • shadowPath • shadowRadius • sublayers • sublayerTransform • transform • zPosition • frame
7. Demo
8. • anchorPoint • backgroundColor • backgroundFilters • borderColor • borderWidth • bounds • compositingFilter • contents • contentsRect • cornerRadius • doubleSided • filters • hidden • mask • masksToBounds • opacity • position • shadowColor • shadowOffset • shadowOpacity • shadowPath • shadowRadius • sublayers • sublayerTransform • transform • zPosition
9. • anchorPoint • backgroundColor • backgroundFilters • borderColor • borderWidth • bounds • compositingFilter • contents • contentsRect • cornerRadius • doubleSided • filters • hidden • mask • masksToBounds • opacity • position • shadowColor • shadowOffset • shadowOpacity • shadowPath • shadowRadius • sublayers • sublayerTransform • transform • zPosition
10. • anchorPoint • backgroundColor • backgroundFilters • borderColor • borderWidth • bounds • compositingFilter • contents • contentsRect • cornerRadius • doubleSided • filters • hidden • mask • masksToBounds • opacity • position • shadowColor • shadowOffset • shadowOpacity • shadowPath • shadowRadius • sublayers • sublayerTransform • transform • zPosition
11. UIView Animations [UIView animateWithDuration:1.0 animations:^{ … }]; [UIView animateWithDuration:1.2 delay:0. options:UIViewAnimationOptionCurveEaseInOut animations:^{ … } completion:^(BOOL finished) { … }];
12. UIView Animations [UIView animateWithDuration:1.2 delay:0. options:UIViewAnimationOptionCurveEaseInOut animations:^{ … } completion:^(BOOL finished) { [UIView animateWithDuration:1.2 delay:0. options:UIViewAnimationOptionCurveEaseInOut animations:^{ … } } completion:^(BOOL finished) { … } }]; Chain Animations
13. Timing • Linear • EaseIn • EaseOut • EaseIn-EaseOut • Default • Custom
14. Linear EaseIn EaseOut EaseIn-EaseOut
15. Implicit vs Explicit • UIView-based • sublayers • Disable with CATransaction • CAAnimation
16. Explicit Animations 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; CABasicAnimation
17. Explicit Animations • CABasicAnimation • CAAnimationGroup • CAKeyFrameAnimation
18. Key Frame Animations 1 2 3 4 5
19. Key Frame Animations
20. CALayer Subclasses • CAShapeLayer • CATiledLayer • CATextLayer • AV Layers (CACaptureVideoPreviewLayer, AVPlayerLayer, etc.) • CAGradientLayer • CATextLayer
21. 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);
22. 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
23. Best Practices • Avoid offscreen rendering—Simulator shows • shouldRasterize can help; it can also hurt. • Blending is still expensive.
24. Thanks! • @corvino • nathan@corvino.com • github.com/corvino/LayerExplorer