Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TDC 2016 - Animações no iOS

218 views

Published on

Palestra sobre animações no iOS, alguns problemas comuns encontrados durante o desenvolvimento na Nubank e como resolvê-los usando o NUAnimationKit.

Published in: Software
  • Be the first to comment

  • Be the first to like this

TDC 2016 - Animações no iOS

  1. 1. Globalcode – Open4education Animações no iOS Victor Maraccini iOS Developer @ Nubank
  2. 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. 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. 4. Globalcode – Open4education Agenda Animações funcionais …têm o propósito de auxiliar a passagem de informação ao usuário
  5. 5. Globalcode – Open4education Agenda Animações funcionais …orientar Dá contexto ao usuário sobre uma mudança acontecendo na interface
  6. 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. 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. 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. 9. Globalcode – Open4education UIView animations
  10. 10. Globalcode – Open4education UIView animations Introduzidas no iOS 4 Block-based Métodos de classe Anima automaticamente algumas propriedades
  11. 11. Globalcode – Open4education UIView animations [UIView animateWithDuration: delay: options: animations:^{ } completion:^(BOOL finished) { }];
  12. 12. Globalcode – Open4education UIView animations [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ } completion:^(BOOL finished) { }];
  13. 13. Globalcode – Open4education UIView animations [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ animationView1.alpha = 0; } completion:^(BOOL finished) { }];
  14. 14. Globalcode – Open4education UIView animations [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ animationView1.alpha = 0; } completion:^(BOOL finished) { ... }];
  15. 15. Globalcode – Open4education UIView animations [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ animationView1.alpha = 0; } completion:^(BOOL finished) { ... }];
  16. 16. Globalcode – Open4education UIView animations [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ animationView1.alpha = 0; } completion:^(BOOL finished) { ... }]; .alpha = 0
  17. 17. Globalcode – Open4education UIView animations [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ animationView1.alpha = 0; } completion:^(BOOL finished) { ... }]; UIView.alpha = 0
  18. 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. 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. 20. Globalcode – Open4education UIView animations UIView.alpha = 0 CALayer CAAnimation - (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key
  21. 21. Globalcode – Open4education UIView animations UIView.alpha = 0 CALayer CAAnimation - (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key .delegate
  22. 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. 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. 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. 25. Globalcode – Open4education UIView UIView
  26. 26. Globalcode – Open4education UIView Backing Layer .layer UIView
  27. 27. Globalcode – Open4education UIView Backing Layer Model Layer Presentation Layer .layer .modelLayer .presentationLayer UIView
  28. 28. Globalcode – Open4education UIView Backing Layer Model Layer Presentation Layer Estado Transição .modelLayer .presentationLayer UIView .layer
  29. 29. Globalcode – Open4education UIView UIView Backing Layer Model Layer Presentation Layer UIView Backing Layer Model Layer Presentation Layer Duas hierarquias independentes
  30. 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. 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. 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. 33. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 1 .opacity = 1 Fluxo de uma mudança de propriedade
  34. 34. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 1 .opacity = 1 .opacity = 1 .opacity = 0
  35. 35. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 0 .opacity = 1 .opacity = 1
  36. 36. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 0 .opacity = 0 .opacity = 1
  37. 37. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 0 .opacity = 0 .opacity = 1 CAAnimation actionForLayer:forKey:
  38. 38. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 0 .opacity = 0 .opacity = 1 CAAnimation
  39. 39. Globalcode – Open4education Layer Model Layer Presentation Layer .modelLayer .presentationLayer CALayer .opacity = 0 .opacity = 0 .opacity = 0 CAAnimation
  40. 40. Globalcode – Open4education Hierarquia
  41. 41. Globalcode – Open4education Hierarquia Toda UIView tem um backing layer
  42. 42. Globalcode – Open4education Hierarquia Toda UIView tem um backing layer Todo CALayer tem: Model layer Presentation layer
  43. 43. Globalcode – Open4education CALayer Set da propriedade dentro de um bloco
  44. 44. Globalcode – Open4education CALayer Set da propriedade dentro de um bloco UIView muda o CALayer
  45. 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. 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. 47. Globalcode – Open4education Encadear animações
  48. 48. Globalcode – Open4education Encadeamento de animações
  49. 49. Globalcode – Open4education Encadeamento de animações Não há uma forma simples e elegante
  50. 50. Globalcode – Open4education Encadeamento de animações Não há uma forma simples e elegante Keyframe animations
  51. 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. 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. 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. 54. Globalcode – Open4education Encadeamento de animações Não há uma forma simples e elegante Nestar UIView Animations
  55. 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. 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. 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. 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. 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. 60. Globalcode – Open4education Encadeamento de animações self.controller = [[NUAnimationController alloc] init]; https://github.com/nubank/NUAnimationKit
  61. 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. 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. 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. 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. 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. 66. Globalcode – Open4education Encadeamento de animações [animationView1 setFrameY:400]; animationView1.backgroundColor = [UIColor grayColor]; [animationView2 setFrameY:400]; [animationView3 setFrameY:400]; Spring CurveEaseInOut TransitionCrossDissolve
  67. 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. 68. Globalcode – Open4education Propriedades não-animáveis
  69. 69. Globalcode – Open4education “Animar" texto de labels Propriedades não-animáveis
  70. 70. Globalcode – Open4education Propriedades não-animáveis Implementação NSTimer?
  71. 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. 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. 73. Globalcode – Open4education Propriedades não-animáveis Implementação CADisplayLink
  74. 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. 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. 76. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal …
  77. 77. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal Callback …
  78. 78. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal Callback … CADisplayLink
  79. 79. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal Callback …Callback Callback
  80. 80. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal Callback …Callback frameInterval = 2;
  81. 81. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal Callback …Callback Callback Δt
  82. 82. Globalcode – Open4education Implementação FrameFrameFrame (1/60 s) Propriedades não-animáveis CADisplayLink Runloop principal …Callback CallbackCallback
  83. 83. Globalcode – Open4education Propriedades não-animáveis Implementação CADisplayLink _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateAnimationProgress)];
  84. 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. 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. 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. 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. 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. 89. Globalcode – Open4education Propriedades não-animáveis https://github.com/nubank/NUAnimationKit
  90. 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. 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. 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. 93. Globalcode – Open4education Animações com AutoLayout
  94. 94. Globalcode – Open4education AutoLayout é ótimo para views estáticas Animações com AutoLayout
  95. 95. Globalcode – Open4education AutoLayout é ótimo para views estáticas Cuidado pra não brigar com ele nas animações! Animações com AutoLayout
  96. 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. 97. Globalcode – Open4education Se alguma coisa mudar, ele desfaz sua animação! Animações com AutoLayout
  98. 98. Globalcode – Open4education Se alguma coisa mudar, ele desfaz sua animação! Animações com AutoLayout
  99. 99. Globalcode – Open4education Se alguma coisa mudar, ele desfaz sua animação! Animações com AutoLayout
  100. 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. 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. 102. Globalcode – Open4education O que aconteceu? Animações com AutoLayout
  103. 103. Globalcode – Open4education O que aconteceu? Clicar no textfield causa um layout pass Animações com AutoLayout
  104. 104. Globalcode – Open4education O que aconteceu? Clicar no textfield causa um layout pass Animações com AutoLayout [self.view setNeedsLayout];
  105. 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. 106. Globalcode – Open4education Animações com AutoLayout
  107. 107. Globalcode – Open4education Animações com AutoLayout O sistema seta os frames (Layout inicial) self.leftView.bounds = ... self.leftView.center = ...
  108. 108. Globalcode – Open4education UIView Animation block Animações com AutoLayout Você seta o center da view self.leftView.center = ...
  109. 109. Globalcode – Open4education UIView Animation block Animações com AutoLayout O sistema invalida o layout (Tap no UITextField) [self.view setNeedsLayout];
  110. 110. Globalcode – Open4education UIView Animation block Animações com AutoLayout O sistema seta os frames (Segundo layout) self.leftView.bounds = ... self.leftView.center = ...
  111. 111. Globalcode – Open4education Duas formas de lidar com isso: Animações com AutoLayout
  112. 112. Globalcode – Open4education Duas formas de lidar com isso: Não mudar o frame dos objetos Animações com AutoLayout
  113. 113. Globalcode – Open4education Duas formas de lidar com isso: Não mudar o frame dos objetos Usar CGAffineTransform Animações com AutoLayout
  114. 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. 115. Globalcode – Open4education CGAffineTransform
  116. 116. Globalcode – Open4education CGAffineTransform Aplicado por cima do bounds e center
  117. 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. 118. Globalcode – Open4education [UIView animateWithDuration:0.5 animations:^{ }]; Aplicado por cima do bounds e center CGAffineTransform self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);
  119. 119. Globalcode – Open4education CGAffineTransform Aplicado por cima do bounds e center [UIView animateWithDuration:0.5 animations:^{ }]; self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);
  120. 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. 121. Globalcode – Open4education Atualiza as constraints dentro do bloco Mudar constraints
  122. 122. Globalcode – Open4education Atualiza as constraints dentro do bloco Mudar constraints [UIView animateWithDuration:0.5 animations:^{ self.leftConstraint.constant += 100; }];
  123. 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. 124. Globalcode – Open4education O que aconteceu? Animações com AutoLayout
  125. 125. Globalcode – Open4education Animações com AutoLayout
  126. 126. Globalcode – Open4education Animações com AutoLayout O sistema seta os frames (Layout inicial) self.leftView.bounds = ... self.leftView.center = ...
  127. 127. Globalcode – Open4education Animações com AutoLayout Você muda a constraint self.leftConstraint.constant += 100; UIView Animation block
  128. 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. 129. Globalcode – Open4education Animações com AutoLayout UIView Animation block self.leftView.bounds = ... self.leftView.center = ... O sistema seta os frames (Segundo layout)
  130. 130. Globalcode – Open4education Atualiza as constraints dentro do bloco Mudar constraints
  131. 131. Globalcode – Open4education Atualiza as constraints dentro do bloco Chama Mudar constraints [self.view layoutIfNeeded];
  132. 132. Globalcode – Open4education Atualiza as constraints dentro do bloco Chama Isso força um novo layout pass Mudar constraints [self.view layoutIfNeeded];
  133. 133. Globalcode – Open4education Atualiza as constraints dentro do bloco Mudar constraints [UIView animateWithDuration:0.5 animations:^{ self.leftConstraint.constant += 100; }]; [self.view layoutIfNeeded];
  134. 134. Globalcode – Open4education Atualiza as constraints dentro do bloco Mudar constraints [UIView animateWithDuration:0.5 animations:^{ self.leftConstraint.constant += 100; }]; [self.view layoutIfNeeded];
  135. 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. 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. 137. Globalcode – Open4education Novidades no iOS 10 Nova arquitetura de animações @protocol UIViewAnimating <NSObject> @protocol UIViewImplicitlyAnimating <UIViewAnimating> @protocol UITimingCurveProvider <NSCoding, NSCopying> Protocolos
  138. 138. Globalcode – Open4education Novidades no iOS 10 Nova arquitetura de animações UIViewPropertyAnimator @protocol UIViewAnimating <NSObject> @protocol UIViewImplicitlyAnimating <UIViewAnimating> @protocol UITimingCurveProvider <NSCoding, NSCopying>
  139. 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. 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. 141. Globalcode – Open4education Novidades no iOS 10 UITimingCurveProvider @property(nonatomic, readonly) UITimingCurveType timingCurveType;
  142. 142. Globalcode – Open4education Novidades no iOS 10 UITimingCurveProvider @property(nonatomic, readonly) UITimingCurveType timingCurveType; @property(nullable, nonatomic, readonly) UICubicTimingParameters *cubicTimingParameters; //Builtin, Cubic ou Composed
  143. 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. 144. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator
  145. 145. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator - (void)pauseAnimation;
  146. 146. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator - (void)pauseAnimation; - (void)finishAnimationAtPosition:(UIViewAnimatingPosition)finalPosition;
  147. 147. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator - (void)pauseAnimation; - (void)finishAnimationAtPosition:(UIViewAnimatingPosition)finalPosition; @property(nonatomic) CGFloat fractionComplete;
  148. 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. 149. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator self.animator = [[UIViewPropertyAnimator alloc] initWithDuration:... curve:... animations:^{ ... }];
  150. 150. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator self.animator = [[UIViewPropertyAnimator alloc] initWithDuration:... curve:... animations:^{ ... }]; [self.animator addAnimations:^{ } delayFactor:0.5];
  151. 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. 152. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator [self.animator pauseAnimation]; self.animator.fractionComplete = 0.5;
  153. 153. Globalcode – Open4education Novidades no iOS 10 UIViewPropertyAnimator [self.animator continueAnimationWithTimingParameters:... durationFactor:0.5]; [self.animator pauseAnimation]; self.animator.fractionComplete = 0.5;
  154. 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. 155. Globalcode – Open4education Resumo
  156. 156. Globalcode – Open4education Resumo Por que animações?
  157. 157. Globalcode – Open4education Resumo Por que animações? Debaixo dos panos com UIView animations
  158. 158. Globalcode – Open4education Resumo Por que animações? Debaixo dos panos com UIView animations Problemas comuns e como resolvê-los
  159. 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. 160. Globalcode – Open4education Obrigado!

×