Índice
1. A ideia de implementação do Flutter
2. Use desenho ou código para obter efeitos de animação
3. Use animação implícita ou animação de exibição para alcançar
Primeira foto do prédio da cidade
1. A ideia de implementação do Flutter
Quando decidimos fazer algumas animações, a primeira coisa a considerar é quais são as formas de implementar as animações no Flutter e qual método de implementação precisamos escolher para atender às nossas necessidades. Sobre esse ponto, o documento oficial também nos dá uma ideia, como mostra a figura a seguir:
2. Use desenho ou código para obter efeitos de animação
A animação baseada em desenho se parece com desenho, como personagens de jogos ou animações que são difíceis de expressar em código puro. Se você precisar desenhar e realizar animações sozinho ou com a equipe, considere usar uma biblioteca de terceiros, como Rive ou Lottie, exportar a animação após concluir a animação e, em seguida, empacotar a animação concluída no arquivo de recursos do projeto para carregamento. Se os componentes fornecidos pelo sistema puderem atingir o efeito de que precisamos, podemos alcançá-lo por meio da codificação.
3. Use animação implícita ou animação de exibição para alcançar
Se nosso componente puder satisfazer o efeito apenas modificando as propriedades do widget, nesse caso podemos considerar o uso de animação invisível. Por exemplo, se queremos fazer um gradiente, uma animação de zoom e uma animação panorâmica, precisamos apenas alterar a transparência, taxa de zoom, posição e outras propriedades do widget para alcançá-lo. Neste momento, a animação implícita é uma boa escolha . Por exemplo, para obter os seguintes efeitos, clique no botão abaixo para obter o zoom do espaço do contêiner acima, mudança de cor, mudança de filete e outros efeitos, precisamos apenas alterar a classe Container para obter, desta vez, a animação implícita não é muito escolha. Precisamos apenas escrever os valores iniciais antes e depois da animação e definir as propriedades da animação.
Figura 2. Animação implícita
Correspondente à animação implícita está a animação de exibição no Flutter. Além de realizar tudo o que a animação implícita pode fazer, a animação de exibição também fornece mais funções. Por exemplo, quando há uma animação em loop em nossa animação, ela é semelhante à seguinte O progresso da atualização semelhante na figura.
Desde o momento em que os dados são carregados até que sejam carregados, o botão gira constantemente, como uma imagem que é girada repetidamente. Ou quando usamos o software de táxi, a animação contínua de ondulação da água exibida durante o processo de táxi, zhe'ge ou a animação produzida pela cooperação de vários Widgets, neste caso, podemos apenas optar por usar a animação de exibição.
Figura 3. Puxe para baixo para atualizar a animação
Existe uma propriedade AnimationController adicional para exibir a animação. Através desta propriedade, podemos controlar as propriedades da animação com mais precisão. A desvantagem é que devemos gerenciar manualmente o ciclo de vida do AnimationController.
4. Qual widget usar
Sabemos que no Flutter tudo é um Widget, e o mesmo é verdade.
Depois de decidir usar animação implícita ou animação de exibição, você pode considerar a última questão, se o sistema fornece componentes integrados para atender aos meus requisitos. A animação implícita geralmente pode ser implementada usando a classe AnimayetedFoo. Foo refere-se às propriedades da animação a serem definidas. Por exemplo, se queremos criar uma animação que mude a transparência de um Container de 0 para 1, ela pode ser implementada com AnimatedOpacity.
Se você não conseguir encontrar os componentes integrados correspondentes, poderá usar o TweenAnimationBuilder para criar animações personalizadas. A animação de exibição é implementada por um widget chamado Foo Transition, como lSideTransition.
Se a animação de exibição do sistema não atender às necessidades, você pode usar a animação de exibição personalizada para expandir AnimatedWidget ou AnimatedBuilder. Claro, se você tiver requisitos de alto desempenho, também pode considerar usar o CustomPainter do sistema para desenhar a animação você mesmo. Mas se você não está tão familiarizado com o Flutter, usar este método para desenhar a animação pode causar problemas de desempenho.
O nível de dificuldade dessas animações é o seguinte:
| Dificuldade da esquerda para a direita (fácil ---> difícil) | ||||
| AnimatedFoo | TweenAnimationBuilder | FooTransition | AnimationBuilder（AnimatedWidget） | CustomPainter |
Este artigo fornece apenas ideias para a implementação da animação e como escolher a maneira de implementar a animação. Os artigos subsequentes apresentarão a implementação da animação em detalhes.