Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction To Core Animation (CocoaConf Chicago March 2015)
Search
corvino
March 27, 2015
Technology
1
72
Introduction To Core Animation (CocoaConf Chicago March 2015)
corvino
March 27, 2015
Tweet
Share
More Decks by corvino
See All by corvino
Core Animation for the Masses
corvino
0
63
Other Decks in Technology
See All in Technology
やっていきテスト
k6s4i53rx
0
160
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
Castor - Symfony Live 2024 - Paris
lyrixx
1
120
10 Years of Kubernetes Patterns Evolution
bibryam
1
100
KTC_DBRE.pdf
_awache
1
290
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.6k
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
大規模データとの戦い方
knih
1
480
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
What's in a price? How to price your products and services
michaelherold
236
11k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Typedesign – Prime Four
hannesfritz
36
2k
It's Worth the Effort
3n
180
27k
Docker and Python
trallard
33
2.6k
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Transcript
Introduction to Core Animation Nathan Corvino March 27, 2015
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; }];
None
CALayer • Manage content, geometry, and visual attributes • Content
Cache (Bitmap/Texture) • GPU!
• 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
• 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
Demo
• 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
• 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
• 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
UIView Animations [UIView animateWithDuration:1.0 animations:^{ … }]; [UIView animateWithDuration:1.2 delay:0.
options:UIViewAnimationOptionCurveEaseInOut animations:^{ … } completion:^(BOOL finished) { … }];
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
Timing • Linear • EaseIn • EaseOut • EaseIn-EaseOut •
Default • Custom
Linear EaseIn EaseOut EaseIn-EaseOut
Implicit vs Explicit • UIView-based • sublayers • Disable with
CATransaction • CAAnimation
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
Explicit Animations • CABasicAnimation • CAAnimationGroup • CAKeyFrameAnimation
Key Frame Animations 1 2 3 4 5
Key Frame Animations
CALayer Subclasses • CAShapeLayer • CATiledLayer • CATextLayer • AV
Layers (CACaptureVideoPreviewLayer, AVPlayerLayer, etc.) • CAGradientLayer • CATextLayer
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);
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
Best Practices • Avoid offscreen rendering—Simulator shows • shouldRasterize can
help; it can also hurt. • Blending is still expensive.
Thanks! • @corvino •
[email protected]
• github.com/corvino/LayerExplorer