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
110
Alberto Lopez's Slides at NSSpain 2014
lascorbe
0
38
Erik Erice's Slides at NSSpain 2014
lascorbe
0
94
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
210
Other Decks in Programming
See All in Programming
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
3.9k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Ruby Parser progress report 2025
yui_knk
1
440
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
170
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
430
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
320
はじめてのMaterial3 Expressive
ym223
2
290
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
A better future with KSS
kneath
239
17k
Into the Great Unknown - MozCon
thekraken
40
2k
Unsuck your backbone
ammeep
671
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Typedesign – Prime Four
hannesfritz
42
2.8k
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]