Tabla de contenido
1. La idea de la implementación de Flutter
2. Usa dibujos o códigos para lograr efectos de animación
3. Usar animación implícita o mostrar animación para lograr
Primera imagen del edificio de la ciudad.
1. La idea de la implementación de Flutter
Cuando decidimos hacer algunas animaciones, lo primero que debemos considerar es cuáles son las formas de implementar animaciones en Flutter y qué método de implementación debemos elegir para satisfacer nuestras necesidades. Respecto a este punto, el documento oficial también nos da una idea, como se muestra en la siguiente figura:
2. Usa dibujos o códigos para lograr efectos de animación
La animación basada en dibujos se parece al dibujo, como los personajes de juegos o las animaciones que son difíciles de expresar en código puro. Si tiene que dibujar y realizar la animación usted mismo o el equipo, puede considerar usar una biblioteca de terceros como Rive o Lottie, exportar la animación después de completarla y luego empaquetar la animación completa en el archivo de recursos del proyecto. para cargar Si los componentes proporcionados por el sistema pueden lograr el efecto que necesitamos, podemos lograrlo mediante la codificación.
3. Usar animación implícita o mostrar animación para lograr
Si nuestro componente puede satisfacer el efecto solo modificando las propiedades del widget, en este caso podemos considerar usar una animación invisible. Por ejemplo, si queremos hacer un degradado, una animación de zoom y una animación panorámica, solo necesitamos cambiar la transparencia, la relación de zoom, la posición y otras propiedades del widget para lograrlo. En este momento, la animación implícita es una buena opción. . Por ejemplo, para lograr los siguientes efectos, haga clic en el botón a continuación para lograr el zoom del espacio del contenedor anterior, el cambio de color, el cambio de filete y otros efectos, solo necesitamos cambiar la clase de contenedor para lograrlo, esta vez la animación implícita no es mucho elección. Solo necesitamos escribir los valores iniciales antes y después de la animación, y establecer las propiedades de la animación.
Figura 2. Animación implícita
Correspondiente a la animación implícita está la animación de visualización en Flutter. Además de realizar todo lo que la animación implícita puede hacer, la animación de visualización también proporciona más funciones. Por ejemplo, cuando hay una animación en bucle en nuestra animación, es similar a la siguiente El progreso de actualización similar en la figura.
Desde el momento en que se cargan los datos hasta que se cargan los datos, el botón gira constantemente, como una imagen que gira repetidamente. O cuando usamos el software de llamada de taxi, la animación continua de ondas de agua que se muestra durante el proceso de llamada de taxi, zhe'ge o la animación producida por la cooperación de múltiples Widgets, en este caso solo podemos elegir usar la animación de visualización.
Figura 3. Tire hacia abajo para actualizar la animación
Hay una propiedad AnimationController adicional para mostrar animaciones. A través de esta propiedad, podemos controlar las propiedades de la animación con mayor precisión. La desventaja es que debemos administrar manualmente el ciclo de vida de AnimationController.
4. Qué widget usar
Sabemos que en Flutter todo es un Widget, y lo mismo ocurre.
Después de decidir usar animación implícita o animación de visualización, puede considerar la última pregunta, si el sistema proporciona componentes integrados para cumplir con mis requisitos. La animación implícita generalmente se puede implementar usando la clase AnimayetedFoo. Foo se refiere a las propiedades de la animación a establecer. Por ejemplo, si queremos crear una animación que cambie la transparencia de un Contenedor de 0 a 1, se puede implementar con Opacidad animada.
Si no puede encontrar los componentes integrados correspondientes, puede usar TweenAnimationBuilder para crear animaciones personalizadas. La animación de visualización se implementa mediante un widget llamado Foo Transition, como lSideTransition.
Si la animación de visualización del sistema no puede satisfacer las necesidades, puede usar la animación de visualización personalizada para expandir AnimatedWidget o AnimatedBuilder. Por supuesto, si tiene requisitos de alto rendimiento, también puede considerar usar CustomPainter del sistema para dibujar la animación usted mismo. Pero si no está tan familiarizado con Flutter, usar este método para dibujar animaciones puede causar problemas de rendimiento.
El nivel de dificultad de estas animaciones es el siguiente:
| Dificultad de izquierda a derecha (fácil ---> difícil) | ||||
| Foo animado | TweenAnimationBuilder | FooTransición | Constructor de animaciones (Widget animado) | Pintor personalizado |
Este artículo solo proporciona ideas para la implementación de la animación y cómo elegir la forma de implementar la animación. Los artículos posteriores presentarán la implementación de la animación en detalle.