Nesta série de postagens, apresentaremos as animações no Flutter e mostraremos como criar animações simples e complexas para o app do Flutter.
Esta postagem também está disponível em vídeo, se preferir.
Esta primeira postagem mostrará o modo mais direto para adicionar animações a seu aplicativo. Não é preciso ser um especialista em animações ou conhecer as terminologias dessa área para adicioná-las a um aplicativo. Aos poucos, introduziremos alguns widgets e termos que ajudarão você a dar os primeiros passos com as animações, além de fornecer contexto para as próximas postagens da série.
O Flutter possui uma série de widgets que são versões animadas de widgets existentes que provavelmente já são usados no seu aplicativo, como a versão AnimatedContainer do widget Container e a versão AnimatedPositioned do widget Positioned.
Esses widgets animam automaticamente as alterações nas propriedades. Ao recriar o widget com novos valores de propriedade, como um setState do StatefulWidget, o widget gerencia o encaminhamento da animação do valor anterior para um novo.
Esses widgets são chamados de widgets implicitamente animados. Eles geralmente são o primeiro recurso que você busca quando precisa adicionar animações ao aplicativo. Eles permitem adicionar animações sem incluir outras complexidades.
Veremos em detalhes como usar um desses widgets implicitamente animados para adicionar animações ao aplicativo.
Neste aplicativo, há um contêiner e um botão. Quando o botão é pressionado, o setState é chamado e o contêiner é recriado com um novo valor de largura. Observe que o contêiner muda a própria largura imediatamente, sem qualquer animação.
@overrideWidget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: _bigger ? 100 : 500, child: Image.asset('assets/star.png'), ), RaisedButton( onPressed: () => setState(() { _bigger = !_bigger; }), child: Icon(Icons.star), ), ], );}
É possível adicionar animações a este aplicativo trocando o widget Container por um widget AnimatedContainer e especificando a duração da animação.
AnimatedContainer( width: _bigger ? 100 : 500, child: Image.asset('assets/star.png'), duration: Duration(seconds: 1),),
Agora, após pressionar o botão, o contêiner cria gradualmente a animação do valor de largura anterior para o novo.
O processo de animação entre o valor anterior e o novo é chamado de interpolação. O AnimatedContainer gerencia a interpolação das propriedades entre os valores anteriores e novos sempre que forem modificados.
Isso se aplica a todas as propriedades do AnimatedContainer, incluindo, por exemplo, a decoração. É possível modificar o gradiente de uma decoração, e o AnimatedContainer gerenciará a interpolação entre o gradiente antigo e o novo:
AnimatedContainer( decoration: BoxDecoration( gradient: RadialGradient( colors: [Colors.purple, Colors.transparent], stops: [ _bigger ? 0.2 : 0.5, 1.0]) ),),
Os widgets implicitamente animados, como o AnimatedContainer, possuem duas propriedades que podem ser usadas para controlar o comportamento da animação. É possível controlar quanto tempo leva para interpolar o novo valor, configurando a propriedade duração.
AnimatedContainer( width: _bigger ? 100 : 500, child: Image.asset('assets/star.png'), duration: Duration(seconds: 5),),
Neste exemplo, configuramos a animação para ter uma duração mais longa.
Também é possível controlar o modo como o widget interpola do valor antigo para o novo usando uma Curva. As curvas controlam a taxa de alteração ao longo do tempo e podem ajudar a tornar as animações mais realistas. Neste exemplo, mudamos a curva do padrão linear para uma curva quíntica mais exagerada:
AnimatedContainer( width: _bigger ? 100 : 500, child: Image.asset('assets/star.png'), duration: Duration(seconds: 1), curve: Curves.easeInOutQuint,),
Há diversas curvas integradas disponíveis para dar um toque especial às animações. Além disso, é possível definir curvas personalizadas. As curvas inclusive não precisam ser sequenciais, como a curva SawTooth.
Veja este exemplo de uma curva personalizada chamada SineCurve, que usa a função de seno para criar uma curva que salta:
class SineCurve extends Curve { final double count; SineCurve({this.count = 1}); @override double transformInternal(double t) { return sin(count * 2 * pi * t) * 0.5 + 0.5; }}
Aqui, a SineCurve faz com que a estrela salte para cima e para baixo:
O Flutter oferece widgets implicitamente animados, que são versões animadas de widgets comuns. É possível controlar o modo como esses widgets animam o aplicativo usando durações e curvas.
O AnimatedContainer é um widget implicitamente animado com eficácia reconhecida devido às inúmeras propriedades que afetam a aparência. Além disso, todas essas propriedades são interpoladas automaticamente.
Todos os outros widgets implicitamente animados também são eficazes, com opções fáceis de usar para adicionar animações sem acrescentar aspectos complexos.
Além disso, não há necessidade de usar esses widgets em um StatefulWidget nem setState. Você pode usar StreamBuilder e FutureBuilder para acionar animações, como neste exemplo.
Os widgets implicitamente animados são sua primeira escolha para adicionar animações, mas isso não é tudo que o sistema de animação do Flutter tem a oferecer. Nas próximas postagens da série, exploraremos as camadas mais inferiores do sistema de animação do Flutter e mostraremos como criar animações avançadas.
Para outras informações, acesse flutter.dev.
Postar um comentário
Nenhum comentário :
Postar um comentário