Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Google Flutter desde cero: Animando widgets

by
Read Time:8 minsLanguages:
This post is part of a series called Google Flutter From Scratch.
Google Flutter From Scratch: Grids, Lists, and Data Sources
Google Flutter From Scratch: Using Firebase Services

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Las animaciones, cuando se usan correctamente, pueden marcar una enorme diferencia en la manera en que los usuarios perciben tu aplicación. Una aplicación con muchas animaciones rápidas y sutiles tienden a lucir más pulcras y profesionales en contraste con las que no las tienen. En Google Play, un mercado atestado, ello puede significar la diferencia entre el éxito y el fracaso.

Flutter es quizá el único framework híbrido de desarrollo de aplicaciones disponible hoy en día que te permite crear animaciones complejas que puedan ejecutarse constantemente en 60 fotogramas por segundo. En este tutorial, te ayudaré a entender los fundamentos de la animación de widgets en Flutter. También te presentaré algunos nuevos widgets que pueden simplificar tu código de animación.

1. Preparando un widget para animación

El framework Flutter espera que sigas un enfoque funcional y reactivo ante la programación. Por lo tanto, para poder animar un widget, debes ser capaz de actualizar su estado repetidamente en intervalos apropiados.

Para crear un widget que sea fácil de animar, comienza creando una clase que extienda la clase StatefulWidget y sobrescribiendo su método createState(). Dentro del método, asegúrate de devolver una instancia State.

Para ser animable, el objeto estado al que asocias tu widget con estado no solo debe extender de la clase State, también debe usar un mixin llamado SingleTickerProviderStateMixin. Como su nombre lo sugiere, el mixin ofrece un objeto Ticker que reiteradamente genera devoluciones de llamadas, convencionalmente conocidas como ticks. Debido a que los ticks son generados repetidamente en intervalos de tiempo uniformes, puedes usarlos para decidir cuando los fotogramas individuales de tu animación se renderizan.

2. Creando una animación tween

Una animación tween es una de las animaciones más simples que puedes crear con Flutter. Mientras la creas, todo lo que necesitas hacer es proporcionar dos valores diferentes: un valor inicial y un valor final. El framework posteriormente generará automáticamente un conjunto de valores intermedios que comienzan desde el valor inicial y crecen lentamente para igualar el valor final. Al aplicar gradualmente esos valores intermedios a una propiedad de tu widget, animas esa propiedad.

Creemos ahora una animación tween sencilla que mueve un widget desde la esquina superior izquierda de la pantalla hasta la esquina superior derecha de la pantalla. En otras palabras, animemos la propiedad left (izquierda) de un widget.

Para crear y controlar la animación, vas a necesitar un objeto Animation y un objeto AnimationController. Agrégalos como variables miembro de tu estado:

Debes inicializar ambos objetos sobrescribiendo el método initState() de tu clase. Dentro del método, llama al constructor de la clase AnimataionController para inicializar el controlador. Espera un objeto TickerProvider como una de sus entradas. Debido a que el estado ya utiliza el mixin SingleTickerProviderStateMixin, puedes pasarle this. Adicionalmente, puedes usar la propiedad duration para especificar la duración de la animación.

El siguiente código crea un controlador de animación cuya duración es de cuatro segundos:

En este punto, puedes crear un objeto Tween especificando los valores inicial y final de tu animación.

Para asociar el objeto Tween con el objeto AnimationController, debes llamar a su método animate(). El valor de devolución del método es un objeto Animation, que puedes almacenar en la segunda variable miembro de tu clase.

El objeto Animation genera un evento de animación para cada tick del ticker, el cual debes manejar para que funcione tu animación. Para hacerlo, puedes usar su método add Listener(). Adicionalmente, dentro del manejador de eventos, debes llamar al método setState() para actualizar el estado de tu widget y redibujarlo. El siguiente código te muestra cómo:

Nota que no tienes que escribir ningún código dentro del método setState() a menos que tengas otras variables de estado para actualizar.

Por último, para comenzar la animación, debes llamar al método forward() del controlador de la animación.

La animación está lista. Sin embargo, todavía no la has aplicado a ningún widget que esté siendo dibujado en la pantalla. Por ahora, te sugiero que la apliques a un widget Positioned que contenga un widget Icon de Material. Para hacerlo, mientras creas el widget, simplemente establece el valor de su propiedad left a la propiedad value del objeto Animation.

Consecuentemente, añade el siguiente código, que sobrescribe el método build() al estado:

Nota que hay un widget Stack en el árbol de widgets de arriba porque un widget Positioned siembre debe ser incrustado dentro de uno.

Puedes ejecutar tu aplicación ahora para ver la animación.

3. Manejando los eventos del estado de la animación

Si quieres ser notificado cuando finalice tu animación, puedes adjuntar un objeto AnimationStatusListener a tu objeto Animation. Dentro del listener, si el estatus actual de la animación es completed (completado) o dismissed (descartado), puedes estar seguro de que la animación ha finalizado.

Las animaciones Tween en Flutter son reversibles. Esa es la razón por la cual hay dos constantes de estatus diferentes que significan el final de una animación. Si el estatus actual es completed, significa que la animación ha finalizado en el valor final del tween. Si es dismissed, ello significa que la animación ha finalizado en el valor inicial. Usando los dos estatus y los métodos forward() y reverse(), fácilmente puedes crear hacia y desde entre animaciones.

El siguiente código, que puedes agregar al método initState(), te muestra cómo revertir y repetir la animación que creaste en el paso anterior:

Si ejecutas de nuevo la aplicación, deberías ver la animación repetirse infinitamente.

4. Usando widgets animados

El framework Flutter ofrece widges listos para ser animados que puedes usar para hacer tu código de animación ligeramente más simple y reutilizable. Todas ellas son subclases de la clase AnimatedWidget y esperan objetos Animation o AnimationController en sus constructores.

Uno de los widgets animados más comúnmente utilizados es el widget RotationTransition. Te permite aplicar rápidamente una animación de rotación a sus hijos. Para usarlo, primero crea un nuevo controlador de animación. El siguiente código crea uno cuya duración está establecida en seis segundos:

Para comenzar la animación esta vez, en lugar del método forward(), usa el método repeat(). Esto asegura que la animación se repite indefinidamente.

Para mantener las cosas sencillas, puedes usar un widget Text como el hijo del widget RotationTransition. Así que crea un árbol de widgets como corresponde. Aunque mientras creas el widget RotationTransition, asegúrate de establecer el valor de su propiedad turns para el objeto AnimationController que acabas de crear. De manera opcional, puedes colocar ambos widgets dentro de un widget Center. De esta manera:

En el código presentado arriba, he utilizado un punto de código de unicode para un emoticono como el contenido del widget Text. Esto se permite porque Flutter soporta emoticonos al instante.

Al ejecutar de nuevo la aplicación, deberías ver algo como esto en tu pantalla:

Muy similar al widget RotationTransition es el widget ScaleTransition. Como podrías haber supuesto, te permite animar la escala de sus hijos. Mientras lo creas, todo lo que necesitas hacer es pasar el objeto AnimationController a su propiedad scale. El siguiente código te muestra cómo:

Ahora podrás ver el cambio de la escala del widget Text durante la animación.

Si te preguntas por qué no creamos ningún objeto Tween para las animaciones presentadas arriba, es porque, por defecto, la clase AnimationController utiliza 0.0 y 1.0 como valores begin (inicio) y end (final).

5. Usando curvas

Todas las animaciones que creamos en los pasos anteriores siguieron una curva lineal. Como resultado, no lucen muy realistas. Alterando la manera en la que el objeto Tween genera valores intermedios, puedes cambiar eso.

Flutter tiene una clase llamada CurvedAnimation, que te permite aplicar curvas no lineales a tus tweens. Cuando la usas con la clase Curves, la cual ofrece una variedad de curvas, como easeIn y easeOut, puedes crear animaciones que se sienten más naturales.

Para crear un objeto CurvedAnimation, necesitarás un objeto AnimationController como padre. Eres libre de usar uno de los controladores que creaste en los pasos anteriores o crear uno nuevo. El siguiente código crea un nuevo controlador cuya duración está establecida en cinco segundos, y un objeto CurvedAnimation cuya propiedad curve está establecida en una curva bounceOut:

Ahora puedes crear un objeto Tween y aplicarle el objeto CurvedAnimation al llamar a su método animate(). Una vez que la animación está lista, no olvides añadir un listener a la animación, actualizar el estado y luego llamar al método forward() para comenzarla.

Para ver la animación, aplíquemosla a una propiedad top del widget Positioned. Eres libre de añadir cualquier widget hijo dentro de él. En el siguiente código, agrego un widget Text que muestra otro emoticono.

Después de un vigoroso reinicio, tu aplicación ahora debería mostrar la siguiente animación:

Conclusión

Ahora conoces los fundamentos de la creación de animaciones tween usando el framework Flutter. En este tutorial, también aprendiste cómo hacerlas lucir más naturales usando curvas. Entiendes que en el modo lento, que es el modo predeterminado durante el desarrollo, las animaciones podrían parecer un poco discontinuas e inestables. Únicamente es en el modo de lanzamiento en el que puedes ver su desempeño real.

Para aprender más, consulta la documentación oficial.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.