TDC 2016 - Animações no iOS

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

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

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

Agenda
…orientar
Dá contexto ao
usuário sobre
uma mudança
acontecendo na
interface

Agenda
…orientar
Dá contexto ao
usuário sobre
uma mudança
acontecendo na
interface
Elementos de
referência

Agenda
…chamar a atenção
Alerta o usuário sobre
uma parte importante da
sua lógica de negócios

UIView animations

UIView animations
Introduzidas no iOS 4
Block-based
Métodos de classe
Anima automaticamente algumas propriedades

UIView animations
[UIView animateWithDuration:
delay:
options:
animations:^{
}
completion:^(BOOL finished) {
}];

UIView animations
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
}
}];

UIView animations
delay:0
animations:^{
animationView1.alpha = 0;
}
}];

UIView animations
delay:0
animations:^{
}
...
}];

UIView animations
delay:0
animations:^{
}
...
}];
.alpha = 0

UIView animations
delay:0
animations:^{
}
...
}];
UIView.alpha = 0

UIView animations
delay:0
animations:^{
}
...
}];
UIView.alpha = 0 CALayer

UIView animations
delay:0
animations:^{
}
...
}];
UIView.alpha = 0 CALayer CAAnimation

UIView animations
- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key

UIView animations
.delegate

UIView animations
{
if ([key isEqualToString:@"..."])
{
return [CAAnimation animation];
}
return [super actionForLayer:layer forKey:key]; //[NSNull null]
}

UIView animations
{
{
CAAnimation *animation = [CAAnimation animation];
animation.beginTime = ...;
animation.duration = ...;
animation.timingFunction = ...;
}
}
EaseInOut
0
0.5[UIView animateWithDuration:
delay:
options:
...
UIViewAnimationOptionCurve

UIView animations
{
{
CAAnimation *animation = [CAAnimation animation];
animation.beginTime = 0.5;
animation.duration = 0;
animation.timingFunction =
[CAMediaTimingFunction functionWithName:@"easeInEaseOut"];
}
}
delay:
options:
...
UIViewAnimationOptionCurve

UIView
UIView

UIView
Backing Layer .layer
UIView

UIView
Backing Layer
Model Layer Presentation Layer
.layer
.modelLayer .presentationLayer
UIView

UIView
Backing Layer
Estado Transição
UIView
.layer

UIView
UIView
Backing Layer
Model Layer
Presentation
Layer
UIView
Backing Layer
Model Layer
Presentation
Layer
Duas hierarquias independentes

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

Layer
CALayer
.opacity = 1 .opacity = 1
Fluxo de uma mudança de propriedade

Layer
CALayer

Layer
CALayer
.opacity = 0

Layer
CALayer
.opacity = 0
CAAnimation
actionForLayer:forKey:

Layer
CALayer
.opacity = 0
CAAnimation

Hierarquia

Hierarquia
Toda UIView tem um backing layer

Hierarquia
Toda UIView tem um backing layer
Todo CALayer tem:
Model layer
Presentation layer

CALayer
Set da propriedade dentro de um bloco

CALayer
UIView muda o CALayer

CALayer
UIView muda o CALayer
Model layer é afetado imediatamente
Presentation layer faz a mudança gradual

Encadear animações

Encadeamento de animações

Não há uma forma simples e elegante

Keyframe animations

Keyframe animations
Não têm suporte a spring

Keyframe animations
Não têm suporte a curvas

Keyframe animations
Não têm suporte a curvas
Você precisa lidar com os delays

Nestar UIView Animations

delay:0
animations:^{
[animationView1 setFrameY:400];
animationView1.backgroundColor = [UIColor grayColor];
}
}];

delay:0
animations:^{
}
delay:0.1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
}
}];
}];

delay:0
animations:^{
}
delay:0.1
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
}
delay:0
usingSpringWithDamping:0.5
initialSpringVelocity:0
options:0
animations:^{
}
completion:nil];
}];
}];

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

self.controller = [[NUAnimationController alloc] init];

[self.controller addAnimations:^{
}]

}]
.withAnimationOption(UIViewAnimationOptionTransitionCrossDissolve)

}]
}]
.withCurve(UIViewAnimationCurveEaseInOut)

}]
}]
}]
.withType(NUAnimationTypeSpringy)
.withDuration(NUSpringAnimationNaturalDuration)

delay:0
options:UIViewAnimationOption
animations:^{
}
delay:0.1
options:UIViewAnimationOption
animations:^{
}
delay:0
using WithDamping:0.5
initialSpringVelocity:0
options:0
animations:^{
}
completion:nil];
}];
}];
Spring
CurveEaseInOut
TransitionCrossDissolve

Spring
CurveEaseInOut
TransitionCrossDissolve

}]
}]
}]
.withType(NUAnimationTypeSpringy)
.withDuration(NUSpringAnimationNaturalDuration)

Propriedades não-animáveis

“Animar" texto de labels

Implementação
NSTimer?

Implementação
NSTimer?
[NSTimer timerWithTimeInterval:1/60.f
target:self
selector:@selector(updateProgress)
userInfo:nil
repeats:YES];

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

Implementação
CADisplayLink

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

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…

Implementação
FrameFrameFrame (1/60 s)
CADisplayLink
Runloop principal
…

Implementação
CADisplayLink
Runloop principal
Callback …

Implementação
CADisplayLink
Runloop principal
Callback …
CADisplayLink

Implementação
CADisplayLink
Runloop principal
Callback …Callback Callback

Implementação
CADisplayLink
Runloop principal
Callback …Callback
frameInterval = 2;

Implementação
CADisplayLink
Runloop principal
Callback …Callback Callback
Δt

Implementação
CADisplayLink
Runloop principal
…Callback CallbackCallback

Implementação
CADisplayLink
_displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(updateAnimationProgress)];

Implementação
CADisplayLink
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
forMode:NSDefaultRunLoopMode];

Implementação
CADisplayLink
- (void)updateAnimationProgress {
self.progress += (self.displayLink.timestamp - self.lastTimestamp) / self.options.duration;
self.lastTimestamp = self.displayLink.timestamp;
}

Implementação
CADisplayLink
}
Diferença de tempo

Implementação
CADisplayLink
if (self.lastTimestamp == 0) {
self.progress = 0;
return;
}
}

Implementação
CADisplayLink
[self.displayLink removeFromRunLoop:[NSRunLoop mainRunLoop]

[self.animator addAnimations:^{
progressView.progress = viewModel.progress;
[progressView layoutIfNeeded];
}].withDuration(NULongAnimationDuration)

.alongSideBlock(^(CGFloat progress){
});

.alongSideBlock(^(CGFloat progress){
amountLabel.text =
[viewModel amountTextForProgress:progress];
});

Animações com AutoLayout

AutoLayout é ótimo para views estáticas

Cuidado pra não brigar com ele nas animações!

Cuidado pra não brigar com ele nas animações!
Se alguma coisa mudar, ele desfaz sua animação!

animations:^{
self.leftView.center = ...,
}];

O que aconteceu?

O que aconteceu?
Clicar no textfield causa um layout pass

O que aconteceu?
[self.view setNeedsLayout];

O que aconteceu?
Autolayout não sabia das suas mudanças…
Logo, ele descarta

O sistema seta os frames
(Layout inicial)
self.leftView.bounds = ...
self.leftView.center = ...

UIView Animation block
Você seta o center da view

O sistema invalida o layout
(Tap no UITextField)

(Segundo layout)

Duas formas de lidar com isso:

Não mudar o frame dos objetos

Usar CGAffineTransform

Mudar constraints

CGAffineTransform

CGAffineTransform
Aplicado por cima do bounds e center

CGAffineTransform
self.leftView.center = CGPointMake(self.leftView.center.x + 100,
self.leftView.center.y);
animations:^{
}];

animations:^{
}];
CGAffineTransform
self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);

CGAffineTransform
animations:^{
}];
self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);

Mudar constraints

Atualiza as constraints dentro do bloco
Mudar constraints

Mudar constraints
animations:^{
self.leftConstraint.constant += 100;
}];

Mudar constraints
animations:^{
}];
Animação não acontece
pois o set do frame é feito
fora do bloco!

Você muda a constraint

O sistema invalida o layout…
mas não seta os novos frames

(Segundo layout)

Chama
Mudar constraints
[self.view layoutIfNeeded];

Chama
Isso força um novo layout pass
Mudar constraints

Mudar constraints
animations:^{
}];

Novidades no iOS 10
Nova arquitetura de animações
delay:
options:
animations:^{
}
}];
Métodos de classe

Novidades no iOS 10
@protocol UIViewAnimating <NSObject>
@protocol UIViewImplicitlyAnimating <UIViewAnimating>
@protocol UITimingCurveProvider <NSCoding, NSCopying>
Protocolos

Novidades no iOS 10
UIViewPropertyAnimator

Novidades no iOS 10
UITimingCurveProvider

Novidades no iOS 10
Cubic / Spring

Novidades no iOS 10
@property(nonatomic, readonly) UITimingCurveType timingCurveType;

Novidades no iOS 10
@property(nullable, nonatomic, readonly) UICubicTimingParameters
*cubicTimingParameters; //Builtin, Cubic ou Composed

Novidades no iOS 10
@property(nullable, nonatomic, readonly) UICubicTimingParameters
*cubicTimingParameters; //Builtin, Cubic ou Composed
@property(nullable, nonatomic, readonly) UISpringTimingParameters
*springTimingParameters; //Spring ou Composed

Novidades no iOS 10

Novidades no iOS 10
- (void)pauseAnimation;

Novidades no iOS 10
- (void)finishAnimationAtPosition:(UIViewAnimatingPosition)finalPosition;

Novidades no iOS 10
@property(nonatomic) CGFloat fractionComplete;

Novidades no iOS 10
@property(nonatomic) CGFloat fractionComplete;
Útil para transições de View Controllers

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

Novidades no iOS 10
self.animator =
curve:...
animations:^{
...
}];
} delayFactor:0.5];

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

Novidades no iOS 10
[self.animator pauseAnimation];
self.animator.fractionComplete = 0.5;

Novidades no iOS 10
[self.animator continueAnimationWithTimingParameters:...
durationFactor:0.5];

Novidades no iOS 10
[self.animator continueAnimationWithTimingParameters:...
durationFactor:0.5];
[self.animator finishAnimationAtPosition:UIViewAnimatingPositionCurrent];
UIViewAnimatingPositionEnd
UIViewAnimatingPositionStart

Resumo

Resumo
Novidades no iOS 10

Obrigado!

TDC 2016 - Animações no iOS

Mais conteúdo relacionado

Destaque

TDC 2016 - Animações no iOS