Flutter - Incluindo animação na sua aplicação - V

Nesta série de artigos vamos mostrar como podemos adicionar animação na nas aplicações Flutter.

Continuando a quarta parte do artigo veremos agora como usar o widget AnimatedDefaultTextStyle.

Animação no Flutter com AnimationController

A classe AnimationController é um controlador para uma animação e permite executar tarefas como:

A classe AnimationController oferece maior flexibilidade na animação. A animação pode ser reproduzida para frente ou para trás, e você pode pará-la também.

Por padrão, um AnimationController produz linearmente valores que variam de 0,0 a 1,0, durante uma determinada duração. O controlador de animação gera um novo valor sempre que o dispositivo executando o aplicativo estiver pronto para exibir um novo quadro (normalmente, essa taxa é de cerca de 60 valores por segundo).

Esta classe precisa de uma classe TickerProvider passando o argumento vsync no construtor. O vsync impede animações off-screen de consumir recursos desnecessários.

Se a animação precisar de apenas um AnimationController, usamos SingleTickerProviderStateMixin. Se a animação precisar de vários AnimationControllers, usamos TickerProviderStateMixin.

A classe Ticker é dirigida pela informação de ScheduleBinding.scheduleFrameCallback uma vez por quadro de animação; tentando sincronizar a animação para ser o mais suave possível.

O objeto padrão AnimationController varia de 0,0 a 1,0, mas se você precisar de um intervalo diferente,
você pode usar a classe Animation (usando Tween) para aceitar um tipo diferente de dados.

A classe AnimationController no início pode parecer complexa de usar devido às diferentes classes necessárias.

A seguir estão as etapas básicas que você executa para criar uma animação personalizada :

1. Adicione o AnimationController;
2. Adicione Animation;
3. Inicie o AnimationController com Duration(milissegundos, segundos e assim por diante);
4. Inicie Animtaion com Tween com os valores inicial e final e encadeie o método animado com um CurvedAnimation;
5. Use o AnimatedBuilder com Animation usando um contêiner com um balão para iniciar Animation chamando o AnimationController.forward() e .reverse() para executar a animação para trás. O widget AnimatedBuilder é usado para criar um widget que executa uma animação reutilizável.

Como você pode ver, depois de quebrar as etapas, ela se torna mais gerenciável e menos complicada.

Neste artigo vamos animar um balão que começa pequeno na parte inferior da tela e, à medida que ele infla,
flutua em direção ao topo.

Ao usar um toque em GestureDetector no balão, a animação é revertida, mostrando o balão esvaziando e flutuando para baixo até a parte inferior da tela. Toda vez que o balão for tocado, a animação recomeça.

 Recursos usados:

Usando o widget AnimatedDefaultTextStyle

Vamos continuar a usar o projeto criado na primeira parte do artigo aproveitando a estrutura básica e criando apenas um arquivo chamado AnimatedDefaultTextStyle.dart na pasta lib.

A seguir vamos criar neste arquivo um statefull widget chamado AnimatedDefaultTextStyleWidget seguindo o mesmo procedimento.(Digite stf e selecione o template...)

No widget criado vamos incluir o código destacado em azul abaixo:

import 'package:flutter/material.dart';
class AnimatedDefaultTextStyleWidget extends StatefulWidget {
  @override
  _AnimatedDefaultTextStyleWidgetState createState() => _AnimatedDefaultTextStyleWidgetState();
}
class _AnimatedDefaultTextStyleWidgetState extends State<AnimatedDefaultTextStyleWidget> {
  
  var _color = Colors.red;
  var _fontSize = 20.0;
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment : MainAxisAlignment.center,
        children : [
          AnimatedDefaultTextStyle(
            duration : const Duration(seconds : 1),
            style : TextStyle(
                color : _color, fontSize : _fontSize
            ),
            child : Text("Macoratti.net")
          ),
          RaisedButton(
            child : Text("Quase tudo para a plataforma .NET"),
            onPressed : () {
              _color = Colors.blue;
              _fontSize = 40.0;
               setState(() {});
            }
          )
        ]
      );
  }
}

Incluimos as variáveis privadas _color e _fontSize para definir os valores iniciais da cor e do tamanho da fonte do texto que será animado.

No exemplo o texto que é filho de AnimatedDefaultTextStyle é ampliado em 100% e sua cor mudará ao longo de 1 segundo.

Executando o projeto teremos o resultado abaixo:

       

Na próxima parte do artigo veremos como usar o widget AnimationController.

"Tendo sido, pois, justificados pela fé, temos paz com Deus, por nosso Senhor Jesus Cristo;
Pelo qual também temos entrada pela fé a esta graça, na qual estamos firmes, e nos gloriamos na esperança da glória de Deus."
Romanos 5:1,2

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti