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
Nacho Soto's Slides at NSSpain 2013
Search
Luis Ascorbe
September 17, 2013
Programming
4
130
Nacho Soto's Slides at NSSpain 2013
NSSpain is an iOS & OSX developers conference in Spain.
More info:
http://nsspain.com
Luis Ascorbe
September 17, 2013
Tweet
Share
More Decks by Luis Ascorbe
See All by Luis Ascorbe
Snapshot Testing at CMD+U Conf
lascorbe
2
130
Dave Verwer's Slides at NSSpain 2014
lascorbe
0
120
Andrew Yates' Slides at NSSpain 2014
lascorbe
0
100
Alberto Lopez's Slides at NSSpain 2014
lascorbe
0
35
Erik Erice's Slides at NSSpain 2014
lascorbe
0
84
Krzysztof Zabłocki's Slides at NSSpain 2013
lascorbe
8
440
Luis Solano's Slides at NSSpain 2013
lascorbe
3
120
Daniel Eggert's Slides at NSSpain 2013
lascorbe
8
200
Other Decks in Programming
See All in Programming
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.3k
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
120
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
イベント駆動で成長して委員会
happymana
1
340
Quine, Polyglot, 良いコード
qnighy
4
650
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1.1k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
380
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.9k
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
Vapor Revolution
kazupon
2
570
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Designing the Hi-DPI Web
ddemaree
280
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Cult of Friendly URLs
andyhume
78
6k
Visualization
eitanlees
145
15k
BBQ
matthewcrist
85
9.3k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Teambox: Starting and Learning
jrom
133
8.8k
Speed Design
sergeychernyshev
25
620
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Transcript
CREATING ANIMATIONS WITH CORE ANIMATION & CORE GRAPHICS Mobile Lead,
MindSnacks Inc. Creator of Sayonara app. Nacho Soto
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. • • • • • • • •
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
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
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:rect]; CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:NSStringFromSelector(@selector(position))];
pathAnimation.path = bezierPath.CGPath; [layer addAnimation:pathAnimation forKey:pathAnimation.keyPath]; PATH ANIMATIONS
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); }];
CORE ANIMATION + CORE GRAPHICS
WHY IS IT SLOW? I have the newest graphics card!
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.
SO HOW DO WE MAKE RENDERING FASTER? DO NOT RENDER
NOT RENDERING MEANS CACHING Solution number 1: use stretchable images.
• Solution number 2: ? •
IDEA: Let’s render all the frames in advance. But, how
do we update the layer each frame?
SPRITE SHEETS
ABOUT ME Currently: Mobile Lead, MindSnacks Inc. Created Sayonara app.
Previously: Web and iOS developer at Ticketea.
[email protected]