127 – Animações Escalonadas em FLUTTER – Curso de Flutter e Dart

Playlist: Curso Grátis de FLUTTER e DART Completo

Animações escalonadas

Uma animação escalonada consiste em animações sequenciais ou sobrepostas.
Para criar uma animação escalonada, use vários objetos de animação.
Um AnimationController controla todas as animações.
Cada objeto de animação especifica a animação durante um intervalo.
Para cada propriedade sendo animada, crie uma interpolação.
Terminologia: Se o conceito de interpolações ou interpolações for novo para você, consulte o tutorial Animações no Flutter.

Animações escalonadas são um conceito direto: as mudanças visuais acontecem como uma série de operações, ao invés de todas de uma só vez. A animação pode ser puramente sequencial, com uma alteração ocorrendo após a próxima ou parcialmente ou completamente sobreposta. Pode também ter lacunas, onde não ocorrem alterações.

Este guia mostra como criar uma animação escalonada no Flutter.

Exemplos
Este guia explica o exemplo de basic_staggered_animation. Você também pode se referir a um exemplo mais complexo, staggered_pic_selection.

basic_staggered_animation
Mostra uma série de animações sequenciais e sobrepostas de um único widget. Tocar na tela inicia uma animação que altera a opacidade, o tamanho, a forma, a cor e o preenchimento.
staggered_pic_selection
Mostra a exclusão de uma imagem de uma lista de imagens exibidas em um dos três tamanhos. Este exemplo usa dois controladores de animação: um para seleção / desmarcação de imagem e um para exclusão de imagem. A animação de seleção / desmarcação é escalonada. (Para ver esse efeito, talvez seja necessário aumentar o valor de timeDilation.) Selecione uma das maiores imagens – ela diminui à medida que exibe uma marca de seleção dentro de um círculo azul. Em seguida, selecione uma das menores imagens – a imagem grande se expande à medida que a marca de seleção desaparece. Antes que a imagem grande tenha sido expandida, a imagem pequena é reduzida para exibir sua marca de seleção. Esse comportamento escalonado é semelhante ao que você pode ver no Google Fotos.
O vídeo a seguir demonstra a animação executada por basic_staggered_animation:

No vídeo, você vê a seguinte animação de um único widget, que começa como um quadrado azul com cantos arredondados. O quadrado percorre as alterações na seguinte ordem:

Desaparece em
Widens
Torna-se mais alto enquanto se move para cima
Transforma-se em um círculo limitado
Muda a cor para laranja
Depois de correr para frente, a animação é executada ao contrário.

Novo no Flutter? Esta página pressupõe que você saiba como criar um layout usando os widgets do Flutter. Para mais informações, consulte Construindo Layouts no Flutter.

Estrutura básica de uma animação escalonada
Qual é o ponto?
Todas as animações são conduzidas pelo mesmo AnimationController.
Independentemente de quanto tempo a animação dura em tempo real, os valores do controlador devem estar entre 0,0 e 1,0, inclusive.
Cada animação tem um intervalo entre 0,0 e 1,0, inclusive.
Para cada propriedade que anima em um intervalo, crie um Tween. A interpolação especifica os valores inicial e final para essa propriedade.
O Tween produz um objeto Animation gerenciado pelo controlador.
O diagrama a seguir mostra os Intervals usados ​​no exemplo basic_staggered_animation. Você pode observar as seguintes características:

A opacidade muda durante os primeiros 10% da linha do tempo.
Um pequeno intervalo ocorre entre a mudança na opacidade e a mudança na largura.
Nada anima durante os últimos 25% da linha do tempo.
Aumentar o preenchimento faz o widget parecer subir.
Aumentando o raio da borda para 0,5, transforma o quadrado com cantos arredondados em um círculo.
As alterações de preenchimento e raio da borda ocorrem durante o mesmo intervalo exato, mas não precisam.
Diagrama mostrando o intervalo especificado para cada movimento

Para configurar a animação:

Crie um AnimationController que gerencie todas as animações.
Crie uma interpolação para cada propriedade sendo animada.
O Tween define um intervalo de valores.
O método animado do Tween requer o controlador pai e produz uma animação para essa propriedade.
Especifique o intervalo na propriedade da curva da animação.
Quando o valor da animação de controle é alterado, o valor da nova animação é alterado, acionando a interface do usuário para atualização.