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
Mastering Core Animation
Search
Felix Chern
September 10, 2012
Technology
3
970
Mastering Core Animation
A walkthrough of Core Animation framework
Felix Chern
September 10, 2012
Tweet
Share
More Decks by Felix Chern
See All by Felix Chern
達到硬體極限的演算法設計
dryman
0
400
Atomic programming
dryman
0
290
我在廣告業學到的 大數據實戰技巧
dryman
1
1.2k
Introduction to Big Data Engineering
dryman
1
510
Type qualifier and friends
dryman
1
120
Other Decks in Technology
See All in Technology
microCMSではじめるAIライティング
himaratsu
0
150
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.3k
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
For a Future-Friendly Web
brad_frost
179
9.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Documentation Writing (for coders)
carmenintech
72
4.9k
Speed Design
sergeychernyshev
32
1k
Visualization
eitanlees
146
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Invisible Side of Design
smashingmag
301
51k
Transcript
Mastering Core Animation Felix Chern (dryman) 12年9月10日星期⼀一
Felix Chern (dryman) Research assistant & iOS developer github id:
idryman twitter id: @idryman blog: idryman.org 12年9月10日星期⼀一
Core Animation • Low level objective c rendering and animation
classes used by UIView and UIKit • High performance rendering with simple programming model • Lightweight data structure 12年9月10日星期⼀一
- classes • CAAnimation • CAAnimationGroup • CABasicAnimation • CADisplayLink
• CAEAGLLayer • CAKeyframeAnimation • CALayer • CAEmitterCell • CAEmitterLayer • CAGradientLayer • CAMediaTimingFunction • CAPropertyAnimation • CAScrollLayer • CATextLayer • CATiledLayer • CATransaction • CATransition - protocols • CAAction • CALayoutManager • CAMediaTiming QuartzCore/QuartzCore.h 12年9月10日星期⼀一
- classes • CAAnimation • CAAnimationGroup • CABasicAnimation • CADisplayLink
• CAEAGLLayer • CAKeyframeAnimation • CALayer • CAEmitterCell • CAEmitterLayer • CAGradientLayer • CAMediaTimingFunction • CAPropertyAnimation • CAScrollLayer • CATextLayer • CATiledLayer • CATransaction • CATransition - protocols • CAAction • CALayoutManager • CAMediaTiming Layer provides contents 12年9月10日星期⼀一
- classes • CAAnimation • CAAnimationGroup • CABasicAnimation • CADisplayLink
• CAEAGLLayer • CAKeyframeAnimation • CALayer • CAEmitterCell • CAEmitterLayer • CAGradientLayer • CAMediaTimingFunction • CAPropertyAnimation • CAScrollLayer • CATextLayer • CATiledLayer • CATransaction • CATransition - protocols • CAAction • CALayoutManager • CAMediaTiming Animation defines how properties are animated 12年9月10日星期⼀一
- classes • CAAnimation • CAAnimationGroup • CABasicAnimation • CADisplayLink
• CAEAGLLayer • CAKeyframeAnimation • CALayer • CAEmitterCell • CAEmitterLayer • CAGradientLayer • CAMediaTimingFunction • CAPropertyAnimation • CAScrollLayer • CATextLayer • CATiledLayer • CATransaction • CATransition - protocols • CAAction • CALayoutManager • CAMediaTiming These allows you to create custom animations and Core Animation add-ons 12年9月10日星期⼀一
• Much like UIView • can set content image, or
draw with Quartz 2D • When you change properties, you will trigger implicit animations CALayer Emitter Layer and Cells CALayer with border and corner radius 12年9月10日星期⼀一
CAAnimation • implicit • layer.position = CGPointMake(x,y); • explicit •
setup CAAnimation • layer addAnimation: forKey: • layer removeAnimationForKey: 12年9月10日星期⼀一
Explicit CAAnimation CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"]; animation.fromValue = @1.0;
animation.toValue = @0.0; animation.autoreverse = YES; animation.repeatCount = INFINITY; animation.duration = 2.0; [layer addAnimation: animation forKey:@"animateOpacity"]; 12年9月10日星期⼀一
time property CABasicAnimation fromValue: toValue: 12年9月10日星期⼀一
time property CABasicAnimation fromValue: toValue: 12年9月10日星期⼀一
time property CABasicAnimation fromValue: toValue: time property CAKeyFrameAnimation fromValue: toValue:
12年9月10日星期⼀一
time property CABasicAnimation fromValue: toValue: time property CAKeyFrameAnimation fromValue: toValue:
NSString * const kCAAnimationLinear; NSString * const kCAAnimationDiscrete; NSString * const kCAAnimationPaced; NSString * const kCAAnimationCubic; NSString * const kCAAnimationCubicPaced; 12年9月10日星期⼀一
CALayer Properties 1 frame property 2 bounds property 3 position
property 4 zPosition property 5 anchorPointZ property 6 anchorPoint property 7 contentsScale property 8 – affineTransform 9 – setAffineTransform: 10 transform property 11 sublayerTransform property 1 contentsGravity property 2 opacity property 3 hidden property 4 masksToBounds property 5 doubleSided property 6 mask property 7 cornerRadius property 8 borderWidth property 9 borderColor property 10 backgroundColor property 11 backgroundFilters property 12 shadowOpacity property 13 shadowRadius property 14 shadowOffset property 15 shadowColor property 16 shadowPath property 17 filters property 18 compositingFilter property 19 style property Most Animations can be created by CAAnimation and CALayer Properties! 12年9月10日星期⼀一
Excepts... 12年9月10日星期⼀一
• Scrolling • Animation related to motion • Animation related
to AVFoundation inputs • Animation related to other continuous event sources In these cases, we need to control frames ourselves 12年9月10日星期⼀一
• Pros: • Won’t miss any data sources • Easier
to implement with delegates • Cons: • Does not allow frame drop • Harder to control timing Push based 12年9月10日星期⼀一
Pull based • Pros • Let CADisplayLink setup runloop, timing,
and everything else • Cons • Event source has to be pullable 12年9月10日星期⼀一
-(void)update { float x_acc, y_acc, phi, a_eff; if (self.sharedManager.accelerometerActive) {
CMAccelerometerData *accData = self.sharedManager.accelerometerData; x_acc = accData.acceleration.x; y_acc = accData.acceleration.y; } else { x_acc = 0; y_acc = -1.0; } /* calculations */ [CATransaction begin]; [CATransaction setDisableActions:YES]; self.bar1.angle = self.current[0]; self.bar2.angle = self.current[1]; self.bar2.position = self.bar1.tailPosition; self.emitterLayer.emitterPosition = self.bar1.tailPosition; self.emitterCell.birthRate = floorf(fabsf(self.current[2]-self.current[3])*10); self.emitterCell.velocity = fabsf(self.bar1.length*self.current[2]); [CATransaction commit]; } _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)]; [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode]; Pull data from accelerometer Disable implicit animation Setup CADisplayLink for updating data Use [_displayLink setPause:YES] to stop animation 12年9月10日星期⼀一
Custom CAAnimation • Use CADisplayLink for runloop • CATransaction for
stoping implicit animation • Confirms to CAMediaTiming protocol • Use CACurrentMediaTime to pull timestamp 12年9月10日星期⼀一
Tips and Tricks 12年9月10日星期⼀一
KeyValue Coding [mySubLayer setName: @"rocket"]; otherLayer.emitterCells = @[mySubLayer, ...]; [otherLayer
setValue: @3.0 forKeyPath: @"emitterCells.rocket.emissionRange"]; 12年9月10日星期⼀一
More on explicit Animation [CATranscation begin]; [CATranscation setDisableActions:YES]; circleLayer.opacity =
0; CABasicAnimation *fade; fade = [CABasicAnimation animationWithKeyPath:@"opacity"]; fade.duration = 1; fade.fromValue = @1.0; fade.toValue = @0.0; fade.beginTime = CACurrentMediaTime() + 3.0; [circleLayer addAnimation:fade forKey:@"fade"]; [CATranscation commit]; The layer opacity will be 0 after the animation ends 12年9月10日星期⼀一
CAEmitterLayer & CAEmitterCell Off screen rendering 12年9月10日星期⼀一
Instruments 12年9月10日星期⼀一
Instruments 12年9月10日星期⼀一
Instruments 12年9月10日星期⼀一
Instruments 12年9月10日星期⼀一
Instruments 12年9月10日星期⼀一
References • WWDC 2011 section 421: Core Animation Essentials •
WWDC 2012 section 211: Building Concurrent User Interface on iOS • WWDC 2012 section 235: iOS App Performance: Responsiveness • WWDC 2012 section 238: iOS App Performance: Graphics and Animations • WWDC 2012 section 506: Optimizing 2D Graphics and Animation Performances • iOS 5 programming -- Pushing the limits ISBN: 1119961327 12年9月10日星期⼀一
Questions? 12年9月10日星期⼀一