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
36
Erik Erice's Slides at NSSpain 2014
lascorbe
0
86
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
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Ruby on cygwin 2025-02
fd0
0
140
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Formの複雑さに立ち向かう
bmthd
1
720
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Featured
See All Featured
Code Review Best Practice
trishagee
66
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Site-Speed That Sticks
csswizardry
3
370
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making Projects Easy
brettharned
116
6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
We Have a Design System, Now What?
morganepeng
51
7.4k
Visualization
eitanlees
146
15k
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]