O documento discute animações no iOS, abordando tópicos como: 1) Por que usar animações e como elas orientam e chamam a atenção do usuário; 2) Como as animações UIView funcionam por baixo dos panos usando CAMediaTimingFunction e CAAnimation; 3) Problemas comuns em encadear animações e formas de resolvê-los, como usar wrappers ou keyframe animations.

1. Globalcode – Open4education
Animações no iOS
Victor Maraccini
iOS Developer @ Nubank

2. Globalcode – Open4education
Agenda
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los
Novidades no iOS 10

3. Globalcode – Open4education
Agenda
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los
Novidades no iOS 10

4. Globalcode – Open4education
Agenda
Animações funcionais
…têm o propósito de auxiliar a passagem de informação ao usuário

5. Globalcode – Open4education
Agenda
Animações funcionais
…orientar
Dá contexto ao
usuário sobre
uma mudança
acontecendo na
interface

6. Globalcode – Open4education
Agenda
Animações funcionais
…orientar
Dá contexto ao
usuário sobre
uma mudança
acontecendo na
interface
Elementos de
referência

7. Globalcode – Open4education
Agenda
…chamar a atenção
Alerta o usuário sobre
uma parte importante da
sua lógica de negócios
Animações funcionais

8. Globalcode – Open4education
Agenda
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los
Novidades no iOS 10

9. Globalcode – Open4education
UIView animations

10. Globalcode – Open4education
UIView animations
Introduzidas no iOS 4
Block-based
Métodos de classe
Anima automaticamente algumas propriedades

11. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:
delay:
options:
animations:^{
}
completion:^(BOOL finished) {
}];

12. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
}
completion:^(BOOL finished) {
}];

13. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
}];

14. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
...
}];

15. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
...
}];

16. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
...
}];
.alpha = 0

17. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
...
}];
UIView.alpha = 0

18. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
...
}];
UIView.alpha = 0 CALayer

19. Globalcode – Open4education
UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
animationView1.alpha = 0;
}
completion:^(BOOL finished) {
...
}];
UIView.alpha = 0 CALayer CAAnimation

20. Globalcode – Open4education
UIView animations
UIView.alpha = 0 CALayer CAAnimation
- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key

21. Globalcode – Open4education
UIView animations
UIView.alpha = 0 CALayer CAAnimation
- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key
.delegate

22. Globalcode – Open4education
UIView animations
UIView.alpha = 0 CALayer CAAnimation
- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key
{
if ([key isEqualToString:@"..."])
{
return [CAAnimation animation];
}
return [super actionForLayer:layer forKey:key]; //[NSNull null]
}

23. Globalcode – Open4education
UIView animations
- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key
{
if ([key isEqualToString:@"..."])
{
CAAnimation *animation = [CAAnimation animation];
animation.beginTime = ...;
animation.duration = ...;
animation.timingFunction = ...;
}
return [super actionForLayer:layer forKey:key]; //[NSNull null]
}
EaseInOut
0
0.5[UIView animateWithDuration:
delay:
options:
...
UIViewAnimationOptionCurve

24. Globalcode – Open4education
UIView animations
- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key
{
if ([key isEqualToString:@"..."])
{
CAAnimation *animation = [CAAnimation animation];
animation.beginTime = 0.5;
animation.duration = 0;
animation.timingFunction =
[CAMediaTimingFunction functionWithName:@"easeInEaseOut"];
}
return [super actionForLayer:layer forKey:key]; //[NSNull null]
}
[UIView animateWithDuration:
delay:
options:
...
UIViewAnimationOptionCurve

25. Globalcode – Open4education
UIView
UIView

26. Globalcode – Open4education
UIView
Backing Layer .layer
UIView

27. Globalcode – Open4education
UIView
Backing Layer
Model Layer Presentation Layer
.layer
.modelLayer .presentationLayer
UIView

28. Globalcode – Open4education
UIView
Backing Layer
Model Layer Presentation Layer
Estado Transição
.modelLayer .presentationLayer
UIView
.layer

29. Globalcode – Open4education
UIView
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
Duas hierarquias independentes

30. Globalcode – Open4education
UIView
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
Duas hierarquias independentes

31. Globalcode – Open4education
UIView
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
Duas hierarquias independentes

32. Globalcode – Open4education
UIView
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
Duas hierarquias independentes

33. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 1 .opacity = 1
Fluxo de uma mudança de propriedade

34. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 1 .opacity = 1
.opacity = 1 .opacity = 0

35. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 0
.opacity = 1 .opacity = 1

36. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 0
.opacity = 0 .opacity = 1

37. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 0
.opacity = 0 .opacity = 1
CAAnimation
actionForLayer:forKey:

38. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 0
.opacity = 0 .opacity = 1
CAAnimation

39. Globalcode – Open4education
Layer
Model Layer Presentation Layer
.modelLayer .presentationLayer
CALayer
.opacity = 0
.opacity = 0 .opacity = 0
CAAnimation

40. Globalcode – Open4education
Hierarquia

41. Globalcode – Open4education
Hierarquia
Toda UIView tem um backing layer

42. Globalcode – Open4education
Hierarquia
Toda UIView tem um backing layer
Todo CALayer tem:
Model layer
Presentation layer

43. Globalcode – Open4education
CALayer
Set da propriedade dentro de um bloco

44. Globalcode – Open4education
CALayer
Set da propriedade dentro de um bloco
UIView muda o CALayer

45. Globalcode – Open4education
CALayer
Set da propriedade dentro de um bloco
UIView muda o CALayer
Model layer é afetado imediatamente
Presentation layer faz a mudança gradual

46. Globalcode – Open4education
Agenda
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los
Novidades no iOS 10

47. Globalcode – Open4education
Encadear animações

48. Globalcode – Open4education
Encadeamento de animações

49. Globalcode – Open4education
Encadeamento de animações
Não há uma forma simples e elegante

50. Globalcode – Open4education
Encadeamento de animações
Não há uma forma simples e elegante
Keyframe animations

51. Globalcode – Open4education
Encadeamento de animações
Não há uma forma simples e elegante
Keyframe animations
Não têm suporte a spring

52. Globalcode – Open4education
Encadeamento de animações
Não há uma forma simples e elegante
Keyframe animations
Não têm suporte a spring
Não têm suporte a curvas

53. Globalcode – Open4education
Encadeamento de animações
Não há uma forma simples e elegante
Keyframe animations
Não têm suporte a spring
Não têm suporte a curvas
Você precisa lidar com os delays

54. Globalcode – Open4education
Encadeamento de animações
Não há uma forma simples e elegante
Nestar UIView Animations

55. Globalcode – Open4education
Encadeamento de animações
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}
completion:^(BOOL finished) {
}];
Nestar UIView Animations

56. Globalcode – Open4education
Encadeamento de animações
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.3
delay:0.1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[animationView2 setFrameY:400];
}
completion:^(BOOL finished) {
}];
}];
Nestar UIView Animations

57. Globalcode – Open4education
Encadeamento de animações
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.3
delay:0.1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[animationView2 setFrameY:400];
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.5
delay:0
usingSpringWithDamping:0.5
initialSpringVelocity:0
options:0
animations:^{
[animationView3 setFrameY:400];
}
completion:nil];
}];
}];
Nestar UIView Animations

58. Globalcode – Open4education
Encadeamento de animações
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.3
delay:0.1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[animationView2 setFrameY:400];
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.5
delay:0
usingSpringWithDamping:0.5
initialSpringVelocity:0
options:0
animations:^{
[animationView3 setFrameY:400];
}
completion:nil];
}];
}];
Nestar UIView Animations

59. Globalcode – Open4education
Encadeamento de animações
Wrapper de UIView animations
Fica com a responsabilidade de concatenar blocos de animação
Propriedades não animáveis, controlar progresso de animações, …
https://github.com/nubank/NUAnimationKit

60. Globalcode – Open4education
Encadeamento de animações
self.controller = [[NUAnimationController alloc] init];
https://github.com/nubank/NUAnimationKit

61. Globalcode – Open4education
Encadeamento de animações
self.controller = [[NUAnimationController alloc] init];
[self.controller addAnimations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}]
https://github.com/nubank/NUAnimationKit

62. Globalcode – Open4education
Encadeamento de animações
self.controller = [[NUAnimationController alloc] init];
[self.controller addAnimations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}]
.withAnimationOption(UIViewAnimationOptionTransitionCrossDissolve)
https://github.com/nubank/NUAnimationKit

63. Globalcode – Open4education
Encadeamento de animações
self.controller = [[NUAnimationController alloc] init];
[self.controller addAnimations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}]
.withAnimationOption(UIViewAnimationOptionTransitionCrossDissolve)
[self.controller addAnimations:^{
[animationView2 setFrameY:400];
}]
.withCurve(UIViewAnimationCurveEaseInOut)
https://github.com/nubank/NUAnimationKit

64. Globalcode – Open4education
Encadeamento de animações
self.controller = [[NUAnimationController alloc] init];
[self.controller addAnimations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}]
.withAnimationOption(UIViewAnimationOptionTransitionCrossDissolve)
[self.controller addAnimations:^{
[animationView2 setFrameY:400];
}]
.withCurve(UIViewAnimationCurveEaseInOut)
[self.controller addAnimations:^{
[animationView3 setFrameY:400];
}]
.withType(NUAnimationTypeSpringy)
.withDuration(NUSpringAnimationNaturalDuration)
https://github.com/nubank/NUAnimationKit

65. Globalcode – Open4education
Encadeamento de animações
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOption
animations:^{
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.3
delay:0.1
options:UIViewAnimationOption
animations:^{
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.5
delay:0
using WithDamping:0.5
initialSpringVelocity:0
options:0
animations:^{
}
completion:nil];
}];
}];
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
[animationView2 setFrameY:400];
[animationView3 setFrameY:400];
Spring
CurveEaseInOut
TransitionCrossDissolve

66. Globalcode – Open4education
Encadeamento de animações
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
[animationView2 setFrameY:400];
[animationView3 setFrameY:400];
Spring
CurveEaseInOut
TransitionCrossDissolve

67. Globalcode – Open4education
Encadeamento de animações
self.controller = [[NUAnimationController alloc] init];
[self.controller addAnimations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}]
.withAnimationOption(UIViewAnimationOptionTransitionCrossDissolve)
[self.controller addAnimations:^{
[animationView2 setFrameY:400];
}]
.withCurve(UIViewAnimationCurveEaseInOut)
[self.controller addAnimations:^{
[animationView3 setFrameY:400];
}]
.withType(NUAnimationTypeSpringy)
.withDuration(NUSpringAnimationNaturalDuration)

68. Globalcode – Open4education
Propriedades não-animáveis

69. Globalcode – Open4education
“Animar" texto de labels
Propriedades não-animáveis

70. Globalcode – Open4education
Propriedades não-animáveis
Implementação
NSTimer?

71. Globalcode – Open4education
Propriedades não-animáveis
Implementação
NSTimer?
[NSTimer timerWithTimeInterval:1/60.f
target:self
selector:@selector(updateProgress)
userInfo:nil
repeats:YES];

72. Globalcode – Open4education
appa
Implementação
Não tem resolução suficiente (~50 ms)
(Precisamos de ~16 ms)
NSTimer?
[NSTimer timerWithTimeInterval:1/60.f
target:self
selector:@selector(updateProgress)
userInfo:nil
repeats:YES];
Because of the various input sources a typical
run loop manages, the effective resolution of
the time interval for a timer is limited to on the
order of 50-100 milliseconds

73. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink

74. Globalcode – Open4education
Propriedades não-animáveis
Implementação
A CADisplayLink object is a timer object that allows your application to synchronize
its drawing to the refresh rate of the display…
CADisplayLink

75. Globalcode – Open4education
Propriedades não-animáveis
Implementação
A CADisplayLink object is a timer object that allows your application to synchronize
its drawing to the
CADisplayLink
refresh rate of the display…

76. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
…

77. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
Callback …

78. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
Callback …
CADisplayLink

79. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
Callback …Callback Callback

80. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
Callback …Callback
frameInterval = 2;

81. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
Callback …Callback Callback
Δt

82. Globalcode – Open4education
Implementação
FrameFrameFrame (1/60 s)
Propriedades não-animáveis
CADisplayLink
Runloop principal
…Callback CallbackCallback

83. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];

84. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];

85. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];
- (void)updateAnimationProgress {
self.progress += (self.displayLink.timestamp - self.lastTimestamp) / self.options.duration;
self.lastTimestamp = self.displayLink.timestamp;
}

86. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];
- (void)updateAnimationProgress {
self.progress += (self.displayLink.timestamp - self.lastTimestamp) / self.options.duration;
self.lastTimestamp = self.displayLink.timestamp;
}
Diferença de tempo

87. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];
- (void)updateAnimationProgress {
if (self.lastTimestamp == 0) {
self.lastTimestamp = self.displayLink.timestamp;
self.progress = 0;
return;
}
self.progress += (self.displayLink.timestamp - self.lastTimestamp) / self.options.duration;
self.lastTimestamp = self.displayLink.timestamp;
}

88. Globalcode – Open4education
Propriedades não-animáveis
Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];
[self.displayLink removeFromRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];

89. Globalcode – Open4education
Propriedades não-animáveis
https://github.com/nubank/NUAnimationKit

90. Globalcode – Open4education
Propriedades não-animáveis
[self.animator addAnimations:^{
progressView.progress = viewModel.progress;
[progressView layoutIfNeeded];
}].withDuration(NULongAnimationDuration)
https://github.com/nubank/NUAnimationKit

91. Globalcode – Open4education
Propriedades não-animáveis
[self.animator addAnimations:^{
progressView.progress = viewModel.progress;
[progressView layoutIfNeeded];
}].withDuration(NULongAnimationDuration)
.alongSideBlock(^(CGFloat progress){
});
https://github.com/nubank/NUAnimationKit

92. Globalcode – Open4education
Propriedades não-animáveis
[self.animator addAnimations:^{
progressView.progress = viewModel.progress;
[progressView layoutIfNeeded];
}].withDuration(NULongAnimationDuration)
.alongSideBlock(^(CGFloat progress){
amountLabel.text =
[viewModel amountTextForProgress:progress];
});
https://github.com/nubank/NUAnimationKit

93. Globalcode – Open4education
Animações com AutoLayout

94. Globalcode – Open4education
AutoLayout é ótimo para views estáticas
Animações com AutoLayout

95. Globalcode – Open4education
AutoLayout é ótimo para views estáticas
Cuidado pra não brigar com ele nas animações!
Animações com AutoLayout

96. Globalcode – Open4education
AutoLayout é ótimo para views estáticas
Cuidado pra não brigar com ele nas animações!
Se alguma coisa mudar, ele desfaz sua animação!
Animações com AutoLayout

97. Globalcode – Open4education
Se alguma coisa mudar, ele desfaz sua animação!
Animações com AutoLayout

98. Globalcode – Open4education
Se alguma coisa mudar, ele desfaz sua animação!
Animações com AutoLayout

99. Globalcode – Open4education
Se alguma coisa mudar, ele desfaz sua animação!
Animações com AutoLayout

100. Globalcode – Open4education
Se alguma coisa mudar, ele desfaz sua animação!
Animações com AutoLayout
[UIView animateWithDuration:0.5
animations:^{
self.leftView.center = ...,
}];

101. Globalcode – Open4education
Se alguma coisa mudar, ele desfaz sua animação!
Animações com AutoLayout
[UIView animateWithDuration:0.5
animations:^{
self.leftView.center = ...,
}];

102. Globalcode – Open4education
O que aconteceu?
Animações com AutoLayout

103. Globalcode – Open4education
O que aconteceu?
Clicar no textfield causa um layout pass
Animações com AutoLayout

104. Globalcode – Open4education
O que aconteceu?
Clicar no textfield causa um layout pass
Animações com AutoLayout
[self.view setNeedsLayout];

105. Globalcode – Open4education
O que aconteceu?
Clicar no textfield causa um layout pass
Autolayout não sabia das suas mudanças…
Logo, ele descarta
Animações com AutoLayout
[self.view setNeedsLayout];

106. Globalcode – Open4education
Animações com AutoLayout

107. Globalcode – Open4education
Animações com AutoLayout
O sistema seta os frames
(Layout inicial)
self.leftView.bounds = ...
self.leftView.center = ...

108. Globalcode – Open4education
UIView Animation block
Animações com AutoLayout
Você seta o center da view
self.leftView.center = ...

109. Globalcode – Open4education
UIView Animation block
Animações com AutoLayout
O sistema invalida o layout
(Tap no UITextField)
[self.view setNeedsLayout];

110. Globalcode – Open4education
UIView Animation block
Animações com AutoLayout
O sistema seta os frames
(Segundo layout)
self.leftView.bounds = ...
self.leftView.center = ...

111. Globalcode – Open4education
Duas formas de lidar com isso:
Animações com AutoLayout

112. Globalcode – Open4education
Duas formas de lidar com isso:
Não mudar o frame dos objetos
Animações com AutoLayout

113. Globalcode – Open4education
Duas formas de lidar com isso:
Não mudar o frame dos objetos
Usar CGAffineTransform
Animações com AutoLayout

114. Globalcode – Open4education
Duas formas de lidar com isso:
Não mudar o frame dos objetos
Usar CGAffineTransform
Mudar constraints
Animações com AutoLayout

115. Globalcode – Open4education
CGAffineTransform

116. Globalcode – Open4education
CGAffineTransform
Aplicado por cima do bounds e center

117. Globalcode – Open4education
CGAffineTransform
Aplicado por cima do bounds e center
self.leftView.center = CGPointMake(self.leftView.center.x + 100,
self.leftView.center.y);
[UIView animateWithDuration:0.5
animations:^{
}];

118. Globalcode – Open4education
[UIView animateWithDuration:0.5
animations:^{
}];
Aplicado por cima do bounds e center
CGAffineTransform
self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);

119. Globalcode – Open4education
CGAffineTransform
Aplicado por cima do bounds e center
[UIView animateWithDuration:0.5
animations:^{
}];
self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);

120. Globalcode – Open4education
Duas formas de lidar com isso:
Não mudar o frame dos objetos
Usar CGAffineTransform
Animações com AutoLayout
Mudar constraints

121. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Mudar constraints

122. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Mudar constraints
[UIView animateWithDuration:0.5
animations:^{
self.leftConstraint.constant += 100;
}];

123. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Mudar constraints
[UIView animateWithDuration:0.5
animations:^{
self.leftConstraint.constant += 100;
}];
Animação não acontece
pois o set do frame é feito
fora do bloco!

124. Globalcode – Open4education
O que aconteceu?
Animações com AutoLayout

125. Globalcode – Open4education
Animações com AutoLayout

126. Globalcode – Open4education
Animações com AutoLayout
O sistema seta os frames
(Layout inicial)
self.leftView.bounds = ...
self.leftView.center = ...

127. Globalcode – Open4education
Animações com AutoLayout
Você muda a constraint
self.leftConstraint.constant += 100;
UIView Animation block

128. Globalcode – Open4education
Animações com AutoLayout
O sistema invalida o layout…
mas não seta os novos frames
UIView Animation block
[self.view setNeedsLayout];

129. Globalcode – Open4education
Animações com AutoLayout
UIView Animation block
self.leftView.bounds = ...
self.leftView.center = ...
O sistema seta os frames
(Segundo layout)

130. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Mudar constraints

131. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Chama
Mudar constraints
[self.view layoutIfNeeded];

132. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Chama
Isso força um novo layout pass
Mudar constraints
[self.view layoutIfNeeded];

133. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Mudar constraints
[UIView animateWithDuration:0.5
animations:^{
self.leftConstraint.constant += 100;
}];
[self.view layoutIfNeeded];

134. Globalcode – Open4education
Atualiza as constraints dentro do bloco
Mudar constraints
[UIView animateWithDuration:0.5
animations:^{
self.leftConstraint.constant += 100;
}];
[self.view layoutIfNeeded];

135. Globalcode – Open4education
Agenda
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los
Novidades no iOS 10

136. Globalcode – Open4education
Novidades no iOS 10
Nova arquitetura de animações
[UIView animateWithDuration:
delay:
options:
animations:^{
}
completion:^(BOOL finished) {
}];
Métodos de classe

137. Globalcode – Open4education
Novidades no iOS 10
Nova arquitetura de animações
@protocol UIViewAnimating <NSObject>
@protocol UIViewImplicitlyAnimating <UIViewAnimating>
@protocol UITimingCurveProvider <NSCoding, NSCopying>
Protocolos

138. Globalcode – Open4education
Novidades no iOS 10
Nova arquitetura de animações
UIViewPropertyAnimator
@protocol UIViewAnimating <NSObject>
@protocol UIViewImplicitlyAnimating <UIViewAnimating>
@protocol UITimingCurveProvider <NSCoding, NSCopying>

139. Globalcode – Open4education
Novidades no iOS 10
Nova arquitetura de animações
UITimingCurveProvider
@protocol UIViewAnimating <NSObject>
@protocol UIViewImplicitlyAnimating <UIViewAnimating>
@protocol UITimingCurveProvider <NSCoding, NSCopying>
UIViewPropertyAnimator

140. Globalcode – Open4education
Novidades no iOS 10
Nova arquitetura de animações
UITimingCurveProvider
@protocol UIViewAnimating <NSObject>
@protocol UIViewImplicitlyAnimating <UIViewAnimating>
@protocol UITimingCurveProvider <NSCoding, NSCopying>
UIViewPropertyAnimator
Cubic / Spring

141. Globalcode – Open4education
Novidades no iOS 10
UITimingCurveProvider
@property(nonatomic, readonly) UITimingCurveType timingCurveType;

142. Globalcode – Open4education
Novidades no iOS 10
UITimingCurveProvider
@property(nonatomic, readonly) UITimingCurveType timingCurveType;
@property(nullable, nonatomic, readonly) UICubicTimingParameters
*cubicTimingParameters; //Builtin, Cubic ou Composed

143. Globalcode – Open4education
Novidades no iOS 10
UITimingCurveProvider
@property(nonatomic, readonly) UITimingCurveType timingCurveType;
@property(nullable, nonatomic, readonly) UICubicTimingParameters
*cubicTimingParameters; //Builtin, Cubic ou Composed
@property(nullable, nonatomic, readonly) UISpringTimingParameters
*springTimingParameters; //Spring ou Composed

144. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator

145. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
- (void)pauseAnimation;

146. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
- (void)pauseAnimation;
- (void)finishAnimationAtPosition:(UIViewAnimatingPosition)finalPosition;

147. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
- (void)pauseAnimation;
- (void)finishAnimationAtPosition:(UIViewAnimatingPosition)finalPosition;
@property(nonatomic) CGFloat fractionComplete;

148. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
- (void)pauseAnimation;
- (void)finishAnimationAtPosition:(UIViewAnimatingPosition)finalPosition;
@property(nonatomic) CGFloat fractionComplete;
Útil para transições de View Controllers

149. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
self.animator =
[[UIViewPropertyAnimator alloc] initWithDuration:...
curve:...
animations:^{
...
}];

150. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
self.animator =
[[UIViewPropertyAnimator alloc] initWithDuration:...
curve:...
animations:^{
...
}];
[self.animator addAnimations:^{
} delayFactor:0.5];

151. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
self.animator =
[[UIViewPropertyAnimator alloc] initWithDuration:...
curve:...
animations:^{
...
}];
[self.animator addAnimations:^{
} delayFactor:0.5];
Mudanças são aditivas
O sistema cria uma transição entre um passo de animação e outro.

152. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
[self.animator pauseAnimation];
self.animator.fractionComplete = 0.5;

153. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
[self.animator continueAnimationWithTimingParameters:...
durationFactor:0.5];
[self.animator pauseAnimation];
self.animator.fractionComplete = 0.5;

154. Globalcode – Open4education
Novidades no iOS 10
UIViewPropertyAnimator
[self.animator continueAnimationWithTimingParameters:...
durationFactor:0.5];
[self.animator pauseAnimation];
self.animator.fractionComplete = 0.5;
[self.animator finishAnimationAtPosition:UIViewAnimatingPositionCurrent];
UIViewAnimatingPositionEnd
UIViewAnimatingPositionStart

155. Globalcode – Open4education
Resumo

156. Globalcode – Open4education
Resumo
Por que animações?

157. Globalcode – Open4education
Resumo
Por que animações?
Debaixo dos panos com UIView animations

158. Globalcode – Open4education
Resumo
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los

159. Globalcode – Open4education
Resumo
Por que animações?
Debaixo dos panos com UIView animations
Problemas comuns e como resolvê-los
Novidades no iOS 10

160. Globalcode – Open4education
Obrigado!