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

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

Backing Layer .layer

UIView

Backing Layer

Model Layer Presentation Layer

.layer

.modelLayer .presentationLayer

UIView

Backing Layer

Estado Transição

UIView

.layer

UIView

Backing Layer

UIView

Backing Layer

Duas hierarquias independentes

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

UIView

Backing Layer

CALayer

.opacity = 1 .opacity = 1

Fluxo de uma mudança de propriedade

CALayer

CALayer.opacity = 0

CAAnimation

actionForLayer:forKey:

CALayer.opacity = 0

CAAnimation

CALayer.opacity = 0

CAAnimation

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

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

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:^{ [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?

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

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

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!

Se alguma coisa mudar, ele desfaz sua animação!

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

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

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

[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

[self.view layoutIfNeeded];

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

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

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

Novidades no iOS 10

Obrigado!

TDC 2016 - Animações no iOS

Software

Introdução à Programação usando Processing Programação Gráfica 2D Animações Exercício Animações

SIMULADORES E ANIMAÇÕES EM HISTÓRIA

Bolas paradas (baixe para ver animações)

CRIANDO ANIMAÇÕES NO POWERPOINT

Targeting mammary stem cells for breast cancer prevention · TDC TDC . TDC TDC . TDC . No Metastases . CSC=Cancer Stem Cell . TDC=Terminally Differentiated Cell . Cancer Stem Cells:

PROTÓTIPO DE SOFTWARE PARA GERAÇÃO DE ANIMAÇÕES …

TDC 2013 - Novidades do iOS 7

Aula 2 Flash - Divirta-se criando animações

Name Event Date Name Event Date 1 Efeitos de animação Dicas para criar: Animações de saída Animações de caminho Animações de moldura

• Cria animações de saúde, agricultura e...2018/03/22 · • Cria animações de saúde, agricultura e microfinanças - Mais de 60 tópicos disponíveis • Todas as animações

Tdc 2012 - Apresentação da trilha iOS

Modellus: Animações Interativas mediando a Aprendizagem

Aula 6 Flash - Divirta-se criando animações

Marriott TDC Translations Reference · Reviewer, TDC Property, CM, PM TDC eCommerce reviewer, BAT Linguistic QA TDC LPM TDC, PM, CM BAT Linguistic QA, CM CM Translation Workflow Project

Aula 3 Flash - Divirta-se criando animações

Aula 5 Flash - Divirta-se criando animações

Stills de animações e backlights para enviar

Animações de Física com gnuplot

javascool.gforge.inria.frjavascool.gforge.inria.fr/documents/revue-tdc/TDC-29.pdf · INTRODUCTION 18disCiÞlineÌinfordmðtique 7entlassVjde1TgrrñittalelS e numéro de TDC sur I'informatique

Webquest fracções (sem animações)