TDC 2016 - Animações no iOS

Globalcode – Open4education

Animações no iOSVictor 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




Novidades no iOS 10


Agenda

Animações funcionais

…têm o propósito de auxiliar a passagem de informação ao usuário


Agenda

Animações funcionais…orientar

Dá contexto ao usuário sobre uma mudança

acontecendo na interface


Agenda

Animações funcionais…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

Animações funcionais


Agenda




Novidades no iOS 10


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:^{ } completion:^(BOOL finished) { }];


UIView animations

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


UIView animations

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

... }];


UIView animations


... }];


UIView animations


... }];

.alpha = 0


UIView animations


... }];

UIView.alpha = 0


UIView animations


... }];

UIView.alpha = 0 CALayer


UIView animations


... }];

UIView.alpha = 0 CALayer CAAnimation


UIView animations


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


UIView animations


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

.delegate


UIView animations


- (id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)key { if ([key isEqualToString:@"..."]) { return [CAAnimation animation]; } return [super actionForLayer:layer forKey:key]; //[NSNull null] }


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] }

EaseInOut00.5 [UIView animateWithDuration:

delay: options:

...UIViewAnimationOptionCurve


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


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


UIView

Backing Layer


Duas hierarquias independentes


UIView

UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer




UIView

UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer




UIView

UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer


UIView

Backing Layer




Layer



CALayer

.opacity = 1 .opacity = 1

Fluxo de uma mudança de propriedade


Layer



CALayer




Layer



CALayer.opacity = 0



Layer



CALayer.opacity = 0



Layer



CALayer.opacity = 0


CAAnimation

actionForLayer:forKey:


Layer



CALayer.opacity = 0


CAAnimation


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


Agenda




Novidades no iOS 10


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



[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{ [animationView1 setFrameY:400]; animationView1.backgroundColor = [UIColor grayColor]; } completion:^(BOOL finished) { }];




[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 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]; }]; }];




[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]; }]; }];




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

https://github.com/nubank/nuanimationkit



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






[self.controller addAnimations:^{ [animationView1 setFrameY:400]; animationView1.backgroundColor = [UIColor grayColor]; }]






[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)





[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];


Spring

CurveEaseInOut

TransitionCrossDissolve



[animationView1 setFrameY:400]; animationView1.backgroundColor = [UIColor grayColor];



Spring

CurveEaseInOut

TransitionCrossDissolve






[self.controller addAnimations:^{ [animationView3 setFrameY:400]; }] .withType(NUAnimationTypeSpringy) .withDuration(NUSpringAnimationNaturalDuration)


Propriedades não-animáveis


“Animar" texto de labels




ImplementaçãoNSTimer?



ImplementaçãoNSTimer?

[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çãoCADisplayLink

_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; }






- (void)updateAnimationProgress {

self.progress += (self.displayLink.timestamp - self.lastTimestamp) / self.options.duration; self.lastTimestamp = self.displayLink.timestamp; }

Diferença de tempo






- (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; }






[self.displayLink removeFromRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];







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





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

});





[self.animator addAnimations:^{ progressView.progress = viewModel.progress; [progressView layoutIfNeeded]; }].withDuration(NULongAnimationDuration) .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!














[UIView animateWithDuration:0.5 animations:^{ self.leftView.center = ..., }];




[UIView animateWithDuration:0.5 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

self.leftView.center = ...




O sistema invalida o layout (Tap no UITextField)





O sistema seta os frames (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);

[UIView animateWithDuration:0.5 animations:^{

}];



}];


CGAffineTransform

self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);


CGAffineTransform



}];

self.leftView.transform = CGAffineTransformMakeTranslation(100, 0);






Mudar constraints


Atualiza as constraints dentro do bloco

Mudar constraints



Mudar constraints

[UIView animateWithDuration:0.5 animations:^{ self.leftConstraint.constant += 100; }];



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!


O que aconteceu?






O sistema seta os frames (Layout inicial)




Você muda a constraint

self.leftConstraint.constant += 100;




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







O sistema seta os frames (Segundo layout)



Mudar constraints



Chama

Mudar constraints

[self.view layoutIfNeeded];



Chama

Isso força um novo layout pass

Mudar constraints

[self.view layoutIfNeeded];



Mudar constraints

[UIView animateWithDuration:0.5 animations:^{ self.leftConstraint.constant += 100;

}];[self.view layoutIfNeeded];



Mudar constraints

[UIView animateWithDuration:0.5 animations:^{ self.leftConstraint.constant += 100;

}];[self.view layoutIfNeeded];


Agenda




Novidades no iOS 10


Novidades no iOS 10

Nova arquitetura de animações

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

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)pauseAnimation;- (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 addAnimations:^{

} delayFactor:0.5];


Novidades no iOS 10



}];

[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.


Novidades no iOS 10


[self.animator pauseAnimation];

self.animator.fractionComplete = 0.5;


Novidades no iOS 10


[self.animator continueAnimationWithTimingParameters:... durationFactor:0.5];

[self.animator pauseAnimation]; self.animator.fractionComplete = 0.5;


Novidades no iOS 10


[self.animator continueAnimationWithTimingParameters:... durationFactor:0.5];

[self.animator pauseAnimation]; self.animator.fractionComplete = 0.5;

[self.animator finishAnimationAtPosition:UIViewAnimatingPositionCurrent]; UIViewAnimatingPositionEnd UIViewAnimatingPositionStart


Resumo


Resumo



Resumo




Resumo





Resumo




Novidades no iOS 10


Obrigado!

Software

TDC 2016 - Animações no iOS