CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

38
CATransaction What the flush ?! Amadour Griffais CocoaHeads Paris 9 janvier 2014

description

Slides of the short talk I gave at the January 2014 session of CocoaHeads Paris. On Core Animation and CATransaction.

Transcript of CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Page 1: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransactionWhat the flush ?!

Amadour GriffaisCocoaHeads Paris

9 janvier 2014

Page 2: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

• crée et manipule des objets graphiques

• les affiche

• les anime

Page 3: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

Page 4: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

Page 5: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

Page 6: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

Page 7: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

CALayer

CAAnimation

Ab

Model

Page 8: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

CALayer

CAAnimation

Ab

Model Render server

C++

Page 9: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

CALayer

CAAnimation

Ab

Model Render server

C++

Page 10: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

CALayer

CAAnimation

Ab

Model

Page 11: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Core Animation

CALayer

CAAnimation

Ab

Model

Page 12: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction

Core Animation Programming GuideExplicit Transactions Let You Change Animation Parameters

[CATransaction begin];[CATransaction setAnimationDuration:0.5];layer.position = CGPoint(100,100);[CATransaction commit];

Page 13: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction

Model

Ab

Page 14: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction

Model

Ab0.5s

Page 15: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction

Core Animation Programming GuideExplicit Transactions Let You Change Animation Parameters

[CATransaction begin];[CATransaction setAnimationDuration:0.5];layer.position = CGPoint(100,100);[CATransaction commit];

Disable Actions Temporarily Using the CATransaction Class

[CATransaction begin];[CATransaction setDisableActions:YES];layer.position = CGPoint(100,100);[CATransaction commit];

Page 16: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction

Model

Ab

Page 17: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction

Model

Ab

Page 18: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction Class Reference

Page 19: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

CATransaction Class Reference

Page 20: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Model Render server

Page 21: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Model Render server

Ab

Page 22: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction flush];

Model Render server

Ab

Page 23: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction flush];

Model Render server

AbAb

Page 24: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction flush];

• Commit de la transaction implicite

• Englobe toutes les transaction explicites

• Envoie les modifications au render server

Page 25: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction flush];

• A chaque tour de runloop

• Provoque layout si nécessaire

Page 26: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!
Page 27: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction flush];

• A chaque tour de runloop

• Provoque layout si nécessaire

• Provoque display si nécessaire

Page 28: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!
Page 29: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction flush];

• Equivalent à [CATransaction commit];

• Attend la fin des transaction explicites

• Définit le beginTime des animations !

Page 30: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

[CATransaction begin];[CATransaction setAnimationDuration:0.5];

CAAnimation* anim = [CABasicAnimation animationWithKeyPath:@"opacity"];[layer addAnimation:anim forKey:@"opacity"];//<CABasicAnimation:0xc028980; duration = 0.5; keyPath = opacity>

[CATransaction commit];//<CABasicAnimation:0xc028980; duration = 0.5; keyPath = opacity>

[CATransaction flush];//<CABasicAnimation:0xc028980; beginTimeMode = absolute;// beginTime = 11797.4; duration = 0.5; keyPath = opacity>

Page 31: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique

Déclencher une animation d’attente avant de bloquer le main thread

[activityIndicator startAnimating];[self doReallyLongStuff];

Page 32: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique

Déclencher une animation d’attente avant de bloquer le main thread

[activityIndicator startAnimating];[CATransaction flush];[self doReallyLongStuff];

Page 33: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique

Appliquer des animations implicites à des layers qui viennent d’être ajoutés

CALayer* layer = [CALayer layer];layer.frame = CGRectMake(0, 0, 200, 200);layer.backgroundColor = [[UIColor redColor] CGColor];[self.view.layer addSublayer:layer];layer.frame = CGRectMake(100, 100, 200, 200);

Page 34: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique

Appliquer des animations implicites à des layers qui viennent d’être ajoutés

CALayer* layer = [CALayer layer];layer.frame = CGRectMake(0, 0, 200, 200);layer.backgroundColor = [[UIColor redColor] CGColor];[self.view.layer addSublayer:layer];[CATransaction flush];layer.frame = CGRectMake(100, 100, 200, 200);

Page 35: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique

Faire un rendu dans un contexte en background et nettoyer derrière soi

CALayer* layer = ...;dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{ UIGraphicsBeginImageContext(layer.bounds.size); CGContextRef context = UIGraphicsGetCurrentContext(); [layer renderInContext:context]; UIImage* image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); dispatch_sync(dispatch_get_main_queue(), ^{ [self useImage:image]; });});

Page 36: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique

Faire un rendu dans un contexte en background et nettoyer derrière soi

CALayer* layer = ...;dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{ UIGraphicsBeginImageContext(layer.bounds.size); CGContextRef context = UIGraphicsGetCurrentContext(); [layer renderInContext:context]; [CATransaction flush]; UIImage* image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); dispatch_sync(dispatch_get_main_queue(), ^{ [self useImage:image]; });});

Page 37: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

En pratique ?Faire un rendu dans un contexte en background et nettoyer derrière soi

CALayer* layer = ...;dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{ [CATransaction lock]; UIGraphicsBeginImageContext(layer.bounds.size); CGContextRef context = UIGraphicsGetCurrentContext(); [layer renderInContext:context]; [CATransaction unlock]; [CATransaction flush]; UIImage* image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); dispatch_sync(dispatch_get_main_queue(), ^{ [self useImage:image]; });});

Page 38: CocoaHeads Paris - Amadour Griffais - CATransaction: What the flush?!

Questions ?

• Ressources

• WWDC videos

• Core Animation Programming Guide

@amadour