122 – Animações em Flutter – Tutorial em Português

Playlist: Curso Grátis de FLUTTER e DART Completo

Tutorial de animações

O que você vai aprender

Como usar as classes fundamentais da biblioteca de animação para adicionar animação a um widget.
Quando usar AnimatedWidget vs. AnimatedBuilder.
Este tutorial mostra como criar animações explícitas no Flutter. Depois de introduzir alguns dos conceitos, classes e métodos essenciais na biblioteca de animação, você percorre 5 exemplos de animação. Os exemplos são construídos um sobre o outro, apresentando a você diferentes aspectos da biblioteca de animação.

O Flutter SDK também fornece animações de transição, como FadeTransition, SizeTransition e SlideTransition. Essas animações simples são acionadas definindo um ponto inicial e final. Eles são mais simples de implementar do que animações explícitas, que são descritas aqui.

Conceitos e classes essenciais de animação
Qual é o ponto?
A animação, uma classe central na biblioteca de animação do Flutter, interpola os valores usados ​​para guiar uma animação.
Um objeto de animação sabe o estado atual de uma animação (por exemplo, se ela foi iniciada, interrompida ou avançando ou invertida), mas não sabe nada sobre o que aparece na tela.
Um AnimationController gerencia a animação.
Uma CurvedAnimation define a progressão como uma curva não linear.
Um Tween interpola entre o intervalo de dados usado pelo objeto sendo animado. Por exemplo, um Tween pode definir uma interpolação de vermelho para azul ou de 0 a 255.
Use Listeners e StatusListeners para monitorar alterações de estado de animação.
O sistema de animação no Flutter é baseado em objetos de animação digitados. Os widgets podem incorporar essas animações diretamente em suas funções de construção, lendo seu valor atual e ouvindo suas mudanças de estado ou podem usar as animações como a base de animações mais elaboradas que elas transmitem para outros widgets.

Animação MAIORdoubleMAIOR
Em Flutter, um objeto de animação não sabe nada sobre o que está na tela. Uma Animação é uma classe abstrata que entende seu valor atual e seu estado (concluído ou dispensado). Um dos tipos de animação mais usados ​​é Animation double.

Um objeto Animation gera sequencialmente números interpolados entre dois valores em uma determinada duração. A saída de um objeto Animation pode ser linear, uma curva, uma função de etapa ou qualquer outro mapeamento que você possa criar. Dependendo de como o objeto Animation é controlado, ele pode ser executado ao contrário ou até mesmo mudar de direção no meio.

Um objeto de animação tem estado. Seu valor atual está sempre disponível no membro .value.

Um objeto de animação não sabe nada sobre funções de renderização ou build ().

CurvedAnimation
Uma CurvedAnimation define o progresso da animação como uma curva não linear.

content_copy
animação = CurvedAnimation (pai: controlador, curva: Curves.easeIn);
 Nota: A classe Curves define muitas curvas comumente usadas ou você pode criar as suas próprias. Por exemplo:

content_copy
import ‘dart: math’;

classe ShakeCurve estende Curva
  @sobrepor
  dupla transformação (duplo t) =MAIOR sin (t * pi * 2);

CurvedAnimation and AnimationController (descrito na próxima seção) são ambos do tipo Animation double então você pode passá-los de forma intercambiável. O CurvedAnimation envolve o objeto que está sendo modificado. Você não cria subclasses do AnimationController para implementar uma curva.

AnimationController
AnimationController é um objeto de animação especial que gera um novo valor sempre que o hardware está pronto para um novo quadro. Por padrão, um AnimationController produz linearmente os números de 0,0 a 1,0 durante uma determinada duração. Por exemplo, esse código cria um objeto Animation, mas não o inicia em execução:

content_copy
controlador =
    AnimationController (duração: const Duração (segundos: 2), vsync: this);
AnimationController deriva de Animation double, então ele pode ser usado sempre que um objeto de animação for necessário. No entanto, o AnimationController tem métodos adicionais para controlar a animação. Por exemplo, você inicia uma animação com o método .forward (). A geração de números está vinculada à atualização da tela, portanto normalmente são gerados 60 números por segundo. Depois que cada número é gerado, cada objeto de animação chama os objetos de escuta anexados. Para criar uma lista de exibição personalizada para cada filho, consulte RepaintBoundary.

Ao criar um AnimationController, você passa um argumento vsync. A presença do vsync impede que as animações fora da tela consumam recursos desnecessários. Você pode usar seu objeto stateful como o vsync adicionando SingleTickerProviderStateMixin à definição de classe. Você pode ver um exemplo disso no animate1 no GitHub.