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
37
Erik Erice's Slides at NSSpain 2014
lascorbe
0
93
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
Jakarta EE Meets AI
ivargrimstad
0
500
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
310
Understanding Kotlin Multiplatform
l2hyunwoo
0
240
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
760
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
110
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.5k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
540
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
BBQ
matthewcrist
89
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
400
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
For a Future-Friendly Web
brad_frost
179
9.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]