Basta começar a animar no Flutter

⚠ Este artigo cobre uma versão anterior do Simple Animation. O básico permanece o mesmo, mas os nomes das classes mudaram .

Você ama Flutter? Então você já conseguiu criar lindas UIs em tempo recorde. Você já experimentou animação? Animações são legais, mas você precisa configurar todas as coisas StatefulWidget, InitState, OnDispose, AnimationController e Tween para cada animação.

Não mais. Vou mostrar como criar animações personalizadas em tempo recorde.

Olhe para este quadrado azul. É um Container com largura , altura e uma cor . Vamos dobrar sua largura. Você só precisa envolvê-lo em um ControlledAnimation :

return ControlledAnimation(
  duration: Duration(seconds: 1),
  tween: Tween(begin: 100.0, end: 200.0),
  builder: (context, width) {
    return Container(width: width, height: 100, color: Colors.blue);
  },
);

      

       Blue square animates to rectangle.
      

Você só precisa especificar ...

• uma duração (duração da animação)
• uma interpolação (o que fazer durante a animação)
• um construtor (como a cena do seu filme se parece) onde a variável animada é acessível como um segundo parâmetro. Neste exemplo, é a largura .

Eu acho que você está bem impressionado agora? Não? Vamos continuar.

Você pode simplesmente controlar a animação com a propriedade de reprodução :

return ControlledAnimation(
  playback: Playback.MIRROR,
  duration: Duration(seconds: 1),
  tween: Tween(begin: 100.0, end: 200.0),
  builder: (context, width) {
    return Container(width: width, height: 100, color: Colors.blue);
  },
);

Adicione atenuação com facilidade. Basta definir a propriedade da curva ...

… Ou escalonar animações independentes especificando um atraso . A animação não será executada antes do término do atraso.

Excelente! Mas quando falamos em cambalear. Eu também tenho uma ferramenta para você - vindo com simple_animations: Diga olá para MultiTrackTween !

Ele se comporta como uma interpolação, mas oferece suporte a várias propriedades para animar de forma independente . Cada propriedade é uma trilha que pode ter uma animação escalonada.

É hora de modificar nossa animação quadrada:

final tween = MultiTrackTween([
  Track("width")
      .add(Duration(seconds: 1), Tween(begin: 100.0, end: 200.0))
      .add(Duration(seconds: 1), ConstantTween(200.0)),
  Track("height")
      .add(Duration(seconds: 1), ConstantTween(100.0))
      .add(Duration(seconds: 1), Tween(begin: 100.0, end: 300.0)),
  Track("color")
      .add(Duration(seconds: 2), 
                 ColorTween(begin: Colors.blue, end: Colors.green)),
  Track("rotation")
      .add(Duration(seconds: 3), Tween(begin: 0.0, end: pi),
           curve: Curves.easeIn),
  Track("radius")
      .add(Duration(milliseconds: 500), ConstantTween(0.0))
      .add(Duration(milliseconds: 1500), 
                                    Tween(begin: 0.0, end: 50.0))
]);

return ControlledAnimation(
  playback: Playback.MIRROR,
  duration: tween.duration,
  tween: tween,
  curve: Curves.easeInOutSine,
  builder: (context, animation) {
    return Transform.rotate(
      angle: animation["rotation"],
      child: Container(
        width: animation["width"],
        height: animation["height"],
        child: Center(
          child: Text("simple\nanimations"),
        ),
        decoration: BoxDecoration(
            color: animation["color"],
            borderRadius:  
          borderRadius.all(Radius.circular(animation["radius"]))),
      ),
    );
  },
);

É simples assim. É por isso que o chamei de simple_animations . E é grátis!

O objetivo deste projeto é simplificar o processo de criação de animação para desenvolvedores de Flutter. Investi muito em documentação e exemplos.

Agora experimente e crie belas animações ...

https://pub.dartlang.org/packages/simple_animations

… E mergulhe na documentação oficial ou explore o aplicativo de exemplo .

Espero que você goste. Sinta-se à vontade para fazer um blog sobre isso ou criar tutoriais em vídeo ! Estou ansioso para ver o que você está criando com isso.

Seu viciado em Flutter,
- Felix -

Leia o artigo de acompanhamento:

Fade em suas IUs no Flutter