Share
Las animaciones, cuando se usan correctamente, pueden hacer una gran diferencia en cómo los usuarios perciben su aplicación. Una aplicación con muchas animaciones rápidas y sutiles tiende a verse mucho más pulida y profesional que una sin ella. En Google Play, un mercado superpoblado, que puede significar la diferencia entre el éxito y el fracaso.
Flutter es quizás el único marco de desarrollo de aplicaciones híbridas disponible en la actualidad que le permite crear animaciones complejas que pueden ejecutarse constantemente a 60 cuadros por segundo. En este tutorial, te ayudaré a comprender los conceptos básicos de la animación de widgets de Flutter. También te presentaré algunos widgets nuevos que pueden simplificar tu código de animación.
El marco Flutter espera que usted siga un enfoque funcional y reactivo de la programación. Por lo tanto, para poder animar un widget, debes poder actualizar su estado repetidamente, en intervalos de tiempo.
Para crear un widget que sea fácil de animar, comience creando una clase que extienda el Stateful Widget clase y anulando su createState () método. Dentro del método, asegúrese de devolver un Estado ejemplo.
la clase MyApp extiende StatefulWidget @override StatecreateState () return new MyState ();
Para ser animable, el objeto de estado que asocie con su widget con estado no solo debe extender el Estado clase, también debe utilizar una mezcla llamada SingleTickerProviderStateMixin. Como su nombre lo sugiere, el mixin ofrece una Corazón Objeto, que genera repetidas devoluciones de llamada, conocidas convencionalmente como ticks. Debido a que los ticks se generan repetidamente en intervalos de tiempo uniformes, puede usarlos para decidir cuándo se renderizan los cuadros individuales de su animación.
clase MyState extiende el estadocon SingleTickerProviderStateMixin @override Widget build (contexto BuildContext) // Más código aquí
Una animación de interpolación es una de las animaciones más simples que puede crear con Flutter. Mientras lo crea, todo lo que necesita hacer es proporcionar dos valores diferentes: un valor inicial y un valor final. El marco generará automáticamente un conjunto de valores intermedios, o valores intermedios, que comienzan a partir del valor inicial y crecen suavemente para coincidir con el valor final. Al aplicar gradualmente esos valores intermedios a una propiedad de su widget, anima esa propiedad..
Ahora creamos una animación de interpolación simple que mueve un widget desde la esquina superior izquierda de la pantalla a la esquina superior derecha de la pantalla. En otras palabras, animemos el izquierda propiedad de un widget.
Para crear y controlar la animación, necesitarás un Animación objeto y un Controlador de animacion objeto. Agrégalos como variables miembro de tu estado:
Animaciónanimación; Controlador de control de animación;
Debe inicializar ambos objetos anulando la estado inicial () Método de su clase. Dentro del método, llamar al constructor de la Controlador de animacion Clase para inicializar el controlador. Se espera un TickerProvider Objeto como una de sus entradas. Porque el estado ya usa el SingleTickerProviderStateMixin Mixin, puedes pasar esta lo. Además, puede utilizar el duración Propiedad 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:
@override void initState () super.initState (); controller = new AnimationController (vsync: this, duration: new Duration (segundos: 4)); // Más código aquí
En este punto, puede crear un Tween Objeto que especifica los valores iniciales y finales de su animación..
Tween Tween = Tween nuevo(comienzo: 10.0, final: 180.0);
Asociar el Tween objeto con el Controlador de animacion objeto, debes llamar a su animar() método. El valor de retorno del método es un Animación Objeto, que puede almacenar en la segunda variable miembro de su clase.
animación = tween.animate (controlador);
los Animación el objeto genera un evento de animación para cada tic del ticker, que debe manejar para que su animación funcione. Para ello, puede utilizar su addListener () método. Además, dentro del controlador de eventos, debe llamar al setState () Método para actualizar el estado de tu widget y volver a dibujarlo. El siguiente código le muestra cómo:
animation.addListener (() setState (() ););
Tenga en cuenta que no tiene que escribir ningún código dentro del setState () Método a menos que tenga otras variables de estado para actualizar.
Por último, para iniciar la animación, debes llamar al adelante() método del controlador de animación.
controller.forward ();
La animación está lista. Sin embargo, todavía no lo ha aplicado a ningún widget que se esté dibujando en la pantalla. Por ahora, te sugiero que lo apliques a un Posicionado widget que contiene un material Icono widget Para hacerlo, mientras crea el widget, simplemente establezca el valor de su izquierda propiedad a valor propiedad de la Animación objeto.
En consecuencia, agregue el siguiente código, que anula la construir() Método, al estado:
@override Widget build (contexto de BuildContext) return new Container (color: Colors.white, child: new Stack (children:[Nuevo posicionado (niño: nuevo Material (niño: nuevo Icono (Icons.airport_shuttle, textDirection: TextDirection.ltr, tamaño: 81.0)), izquierda: animation.value, // Valor animado arriba: 30.0 // Valor fijo)], TextDirection: TextDirection.ltr,));
Tenga en cuenta que hay una Apilar widget en el árbol de widgets anterior porque una Posicionado El widget siempre debe estar incrustado dentro de uno..
Puedes ejecutar tu aplicación ahora para ver la animación..
Si desea recibir una notificación cuando su animación haya finalizado, puede adjuntar un AnimationStatusListener objetar a tu Animación objeto. Dentro del oyente, si el estado actual de la animación es terminado o despedido, Puedes estar seguro de que la animación ha terminado..
Las animaciones de Tween en Flutter son reversibles. Esa es la razón por la que hay dos constantes de estado diferentes que significan el final de una animación. Si el estado actual es terminado, significa que la animación ha finalizado en el valor final de la interpolación. Si esto es despedido, significa que la animación ha finalizado en el valor de inicio. Usando los dos estados y el adelante() y marcha atrás() Métodos, puedes crear fácilmente de un lado a otro entre animaciones..
El siguiente código, que puede agregar a la estado inicial () Método, le muestra cómo revertir y repetir la animación que creó en el paso anterior:
animation.addStatusListener ((status) if (status == AnimationStatus.completed) controller.reverse (); else if (status == AnimationStatus.dismissed) controller.forward (););
Si vuelves a ejecutar la aplicación, deberías ver la animación repetirse sin cesar..
El marco de Flutter ofrece algunos widgets fácilmente animables que puedes usar para hacer que tu código de animación sea un poco menos detallado y más reutilizable. Todos ellos son subclases de la AnimatedWidget clase y espera Animación o Controlador de animacion Objetos en sus constructores..
Uno de los widgets animados más utilizados es el RotationTransition widget 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 se establece en seis segundos:
controller = new AnimationController (vsync: this, duration: new Duration (segundos: 6));
Para iniciar la animación esta vez, en lugar de la adelante() método, utilice el repetir() método. Esto asegura que la animación se repite sin cesar..
controller.repeat ();
Para mantener las cosas simples, puedes usar un Texto widget como el hijo de la RotationTransition widget Así que crea un árbol de widgets en consecuencia. Al crear el RotationTransition widget, sin embargo, asegúrese de establecer el valor de su vueltas propiedad a Controlador de animacion objeto que acaba de crear. Opcionalmente, puede colocar ambos widgets dentro de un Centrar widget Así es cómo:
Accentsconagua
@override Widget build (contexto BuildContext) return new Center (child: new RotationTransition (gira: controller, child: new Text ("\ u 1F43A", textDirection: TextDirection.ltr, estilo: new TextStyle (tamaño de fuente: 85.0) ,))); En el código anterior, he usado un punto de código Emoji de Unicode como el contenido de Texto widget Esto está permitido porque Flutter admite emoji directamente de la caja..
Al ejecutar la aplicación nuevamente, debería ver algo como esto en su pantalla:
Muy similar a la RotationTransition widget es el Transición de escala widget Como habrás adivinado, te permite animar la escala de sus hijos. Mientras lo creas, todo lo que necesitas hacer es pasar el Controlador de animacion objetar a su escala propiedad. El siguiente código te muestra cómo:
@override Widget build (contexto BuildContext) return new Center (child: new ScaleTransition (scale: controller, child: new Text ("\ u 1F43A", textDirection: TextDirection.ltr, style: new TextStyle (fontSize: 85.0) ,))); Ahora podrás ver el Texto Cambio de escala del widget durante la animación..
Si te estás preguntando por qué no creamos ninguna Tween objetos para las animaciones anteriores, es porque, por defecto, el Controlador de animacion clase utiliza 0.0 y 1.0 como el empezar y fin valores.
Todas las animaciones que creamos en pasos anteriores seguían una curva lineal. Como resultado, no se ven muy realistas. Al alterar la forma en que el Tween objeto genera valores intermedios, puede cambiar eso.
Flutter tiene una clase llamada CurvedAnimation, lo que le permite aplicar curvas no lineales a sus interpolaciones. Cuando lo usas con el Curvas clase, que ofrece una variedad de curvas, tales como facilidad en y Facilitarse, Puedes crear animaciones que se sienten más naturales..
Para crear un CurvedAnimation objeto, necesitarás un Controlador de animacion objeto como padre. Usted es libre de usar uno de los controladores que creó en pasos anteriores o crear uno nuevo. El siguiente código crea un nuevo controlador cuya duración se establece en cinco segundos, y un CurvedAnimation objeto cuyo curva la propiedad se establece en un rebotar fuera curva:
controller = new AnimationController (vsync: this, duration: new Duration (segundos: 5)); CurvedAnimation curvedAnimation = new CurvedAnimation (padre: controlador, curva: Curves.bounceOut);
Ahora puedes crear un Tween objetar y aplicar el CurvedAnimation objetarlo llamando a su animar() método. Una vez que la animación esté lista, no olvide agregar un oyente a la animación, actualice el estado y luego llame al adelante() método para iniciarlo.
Tween myTween = Tween nuevo(comienzo: 150.0, final: 450.0); animación = myTween.animate (curvedAnimation); animation.addListener (() setState (() );); controller.forward ();
Para ver la animación, apliquémosla a un Posicionado widgets parte superior propiedad. Eres libre de agregar cualquier widget de niño dentro de él. En el siguiente código, agrego un Texto widget que muestra otro emoji.
@override Widget build (contexto BuildContext) return new Stack (children: [new Positioned (child: new Text ("\ u 26BE", textDirection: TextDirection.ltr, style: new TextStyle (tamaño de fuente: 70.0)) : 50.0, arriba: animación.valor // Propiedad animada)], textDirection: TextDirection.ltr,); Después de un reinicio en caliente, su aplicación ahora debería mostrar la siguiente animación:
Ahora conoce los conceptos básicos de la creación de animaciones de interpolación utilizando el marco Flutter. En este tutorial, también aprendiste cómo hacer que se vean más naturales usando curvas. Comprenda que en el modo lento, que es el modo predeterminado durante el desarrollo, las animaciones pueden parecer un poco retrasadas e inestables. Solo en el modo de lanzamiento puedes ver su verdadero rendimiento..
Para obtener más información, consulte la documentación oficial..
