Share
Les animations, lorsqu'elles sont utilisées correctement, peuvent faire une énorme différence dans la façon dont les utilisateurs perçoivent votre application. Une application avec beaucoup d'animations rapides et subtiles a tendance à avoir l'air beaucoup plus raffinée et professionnelle qu'un autre sans. Sur Google Play, un marché surpeuplé, cela peut faire toute la différence entre le succès et l'échec.
Flutter est peut-être le seul framework de développement d'applications hybrides disponible à ce jour, qui vous permet de créer des animations complexes pouvant fonctionner en permanence à 60 images par seconde. Dans ce tutoriel, je vais vous aider à comprendre les bases de l'animation de widgets Flutter. Je vais également vous présenter quelques nouveaux widgets qui peuvent simplifier votre code d'animation..
Le framework Flutter s'attend à ce que vous suiviez une approche de programmation fonctionnelle et réactive. Par conséquent, pour pouvoir animer un widget, vous devez pouvoir mettre à jour son état de manière répétée, à intervalles réguliers..
Pour créer un widget facile à animer, commencez par créer une classe qui étend la StatefulWidget classe et dépassant sa createState () méthode. Dans la méthode, assurez-vous de renvoyer un Etat exemple.
La classe MyApp étend StatefulWidget @override StatecreateState () retour new myState ();
Pour pouvoir être animé, l’objet state que vous associez à votre widget stateful ne doit pas seulement étendre la Etat classe, il doit également utiliser un mixin appelé SingleTickerProviderStateMixin. Comme son nom l'indique, le mixin offre une Téléscripteur objet, qui génère à plusieurs reprises des rappels, généralement appelés ticks. Comme les ticks sont générés de manière répétée à des intervalles de temps uniformes, vous pouvez les utiliser pour décider du moment du rendu des images individuelles de votre animation..
la classe MyState étend l'Etatavec SingleTickerProviderStateMixin @override Widget build (contexte BuildContext) // Plus de code ici
Une animation d'interpolation est l'une des animations les plus simples que vous puissiez créer avec Flutter. Lors de la création, il vous suffit de fournir deux valeurs différentes: une valeur de départ et une valeur de fin. La structure générera alors automatiquement un ensemble de valeurs intermédiaires, ou entre-valeurs, commençant à la valeur initiale et augmentant progressivement pour correspondre à la valeur finale. En appliquant progressivement ces valeurs intermédiaires à une propriété de votre widget, vous animez cette propriété..
Créons maintenant une animation d'interpolation simple qui déplace un widget du coin supérieur gauche de l'écran vers le coin supérieur droit de l'écran. En d’autres termes, animons le la gauche propriété d'un widget.
Pour créer et contrôler l'animation, vous aurez besoin d'un Animation objet et un AnimationContrôleur objet. Ajoutez-les en tant que variables membres de votre état:
Animationanimation; Contrôleur AnimationController;
Vous devez initialiser les deux objets en remplaçant le initState () méthode de votre classe. Dans la méthode, appelez le constructeur de la AnimationContrôleur classe pour initialiser le contrôleur. Il attend un TickerProvider objet comme l'une de ses entrées. Parce que l'Etat utilise déjà le SingleTickerProviderStateMixin mixin, tu peux passer ce à cela. De plus, vous pouvez utiliser le durée propriété pour spécifier la durée de l'animation.
Le code suivant crée un contrôleur d'animation d'une durée de quatre secondes:
@override void initState () super.initState (); controller = new AnimationController (vsync: this, duration: new Duration (seconds: 4)); // Plus de code ici
À ce stade, vous pouvez créer un Tween objet spécifiant les valeurs de début et de fin de votre animation.
Tween Tween = nouveau Tween(début: 10,0, fin: 180,0);
Associer le Tween objet avec le AnimationContrôleur objet, vous devez appeler son animer() méthode. La valeur de retour de la méthode est un Animation objet, que vous pouvez stocker dans la deuxième variable membre de votre classe.
animation = tween.animate (contrôleur);
le Animation object génère un événement d'animation pour chaque tick du ticker, que vous devez gérer pour que votre animation fonctionne. Pour ce faire, vous pouvez utiliser ses addListener () méthode. De plus, à l'intérieur du gestionnaire d'événements, vous devez appeler le setState () méthode pour mettre à jour l'état de votre widget et le redessiner. Le code suivant vous montre comment:
animation.addListener (() setState (() ););
Notez que vous n’aurez pas à écrire de code à l’intérieur du setState () méthode sauf si vous avez d'autres variables d'état à mettre à jour.
Enfin, pour lancer l’animation, vous devez appeler le vers l'avant() méthode du contrôleur d'animation.
controller.forward ();
L'animation est prête. Cependant, vous ne l'avez toujours pas appliqué à un widget en cours de dessin à l'écran. Pour l'instant, je vous suggère de l'appliquer à un Positionné widget contenant un matériau Icône widget. Pour ce faire, lors de la création du widget, définissez simplement la valeur de son la gauche propriété à la valeur propriété du Animation objet.
En conséquence, ajoutez le code suivant, qui remplace le construire() méthode, à l'état:
@override Widget build (contexte BuildContext) retourne un nouveau conteneur (color: Colors.white, child: new Stack (enfants:[new Positioned (child: new Material (enfant: new Icon (Icons.airport_shuttle, textDirection: TextDirection.ltr, size: 81.0)), gauche: animation.value, // valeur animée en haut: 30.0 // valeur fixe)], textDirection: TextDirection.ltr,));
Notez qu'il y a un Empiler widget dans l'arbre ci-dessus parce qu'un Positionné widget doit toujours être intégré à l'intérieur d'un.
Vous pouvez exécuter votre application maintenant pour voir l'animation.
Si vous souhaitez être averti de la fin de votre animation, vous pouvez joindre un AnimationStatusListener objecter à votre Animation objet. Dans l'écouteur, si le statut actuel de l'animation est terminé ou rejeté, vous pouvez être sûr que l'animation est terminée.
Les animations Tween dans Flutter sont réversibles. C'est la raison pour laquelle deux constantes d'état différentes signifient la fin d'une animation. Si le statut actuel est terminé, cela signifie que l'animation s'est terminée à la valeur finale de l'interpolation. Si c'est rejeté, cela signifie que l'animation s'est terminée à la valeur de départ. En utilisant les deux statuts et le vers l'avant() et sens inverse() méthodes, vous pouvez facilement créer un va-et-vient entre les animations.
Le code suivant, que vous pouvez ajouter au initState () méthode, montre comment inverser et répéter l'animation créée à l'étape précédente:
animation.addStatusListener ((status) if (status == AnimationStatus.completed) controller.reverse (); sinon if (status == AnimationStatus.dismissed) controller.forward (););
Si vous exécutez à nouveau l'application, vous devriez voir l'animation se répéter indéfiniment.
Le framework Flutter offre quelques widgets facilement animables que vous pouvez utiliser pour rendre votre code d'animation un peu moins détaillé et plus réutilisable. Tous sont des sous-classes du Voyage animé classe et attendre Animation ou AnimationContrôleur objets dans leurs constructeurs.
L’un des widgets animés les plus couramment utilisés est le RotationTransition widget. Il vous permet d'appliquer rapidement une animation de rotation à ses enfants. Pour l'utiliser, créez d'abord un nouveau contrôleur d'animation. Le code suivant en crée un dont la durée est définie à six secondes:
controller = new AnimationController (vsync: this, duration: new Duration (seconds: 6));
Pour démarrer l'animation cette fois, au lieu de la vers l'avant() méthode, utilisez le répéter() méthode. Cela garantit que l'animation se répète indéfiniment.
controller.repeat ();
Pour garder les choses simples, vous pouvez utiliser un Texte widget en tant qu'enfant du RotationTransition widget. Créez donc une arborescence de widgets en conséquence. En créant le RotationTransition widget, cependant, assurez-vous de définir la valeur de son se tourne propriété à la AnimationContrôleur objet que vous venez de créer. Facultativement, vous pouvez placer les deux widgets dans un Centre widget. Voici comment:
Accentsconagua
@override Widget build (contexte BuildContext) renvoie le nouveau Centre (enfant: nouvelle RotationTransition (se transforme en: contrôleur, enfant: nouveau Texte ("\ u 1F43A"), textDirection: TextDirection.ltr, style: nouveau TextStyle (fontSize: 85.0) ,))); Dans le code ci-dessus, j’ai utilisé un point de code Unicode emoji comme contenu de la Texte widget. Ceci est autorisé car Flutter prend en charge les emoji dès la sortie de la boîte..
Lors de l'exécution de l'application à nouveau, vous devriez voir quelque chose comme ceci sur votre écran:
Très semblable à la RotationTransition widget est le ScaleTransition widget. Comme vous l'avez peut-être deviné, cela vous permet d'animer la taille de ses enfants. Tout en le créant, tout ce que vous avez à faire est de passer le AnimationContrôleur objecter à sa échelle propriété. Le code suivant vous montre comment:
@override Widget build (contexte BuildContext) retourne le nouveau centre (enfant: nouveau ScaleTransition (échelle: contrôleur, enfant: nouveau texte ("\ u 1F43A"), textDirection: textDirection.ltr, style: nouveau TextStyle (fontSize: 85.0) ,))); Vous pourrez maintenant voir le Texte changement d'échelle du widget pendant l'animation.
Si vous vous demandez pourquoi nous n'en avons créé aucun Tween objets pour les animations ci-dessus, c'est parce que, par défaut, le AnimationContrôleur classe utilise 0.0 et 1.0 comme commencer et fin valeurs.
Toutes les animations que nous avons créées au cours des étapes précédentes suivaient une courbe linéaire. En conséquence, ils ne semblent pas très réalistes. En modifiant la façon dont le Tween objet génère des valeurs intermédiaires, vous pouvez changer cela.
Flutter a une classe appelée CurvedAnimation, qui vous permet d'appliquer des courbes non linéaires à vos tweens. Quand vous l'utilisez avec le Courbes classe, qui offre une variété de courbes, telles que facilité dans et easyOut, vous pouvez créer des animations plus naturelles.
Créer un CurvedAnimation objet, vous aurez besoin d'un AnimationContrôleur objet en tant que parent. Vous êtes libre d'utiliser l'un des contrôleurs créés précédemment ou d'en créer un nouveau. Le code suivant crée un nouveau contrôleur dont la durée est définie sur cinq secondes et un CurvedAnimation objet dont courbe propriété est définie sur un bounceOut courbe:
controller = new AnimationController (vsync: this, duration: new Duration (seconds: 5)); CurvedAnimation curvedAnimation = new CurvedAnimation (parent: contrôleur, courbe: Curves.bounceOut);
Vous pouvez maintenant créer un Tween objecter et appliquer le CurvedAnimation s'y opposer en appelant sa animer() méthode. Une fois l’animation prête, n’oubliez pas d’ajouter un écouteur à l’animation, de mettre à jour l’état, puis d’appeler le vers l'avant() méthode pour le démarrer.
Tween myTween = nouveau Tween(début: 150.0, fin: 450.0); animation = myTween.animate (curvedAnimation); animation.addListener (() setState (() );); controller.forward ();
Pour voir l'animation, appliquons-la à un Positionné le widget Haut propriété. Vous êtes libre d'ajouter n'importe quel widget enfant à l'intérieur. Dans le code suivant, j'ajoute un Texte widget affichant un autre emoji.
@override Widget build (contexte BuildContext) retourne une nouvelle pile (enfants: [new Positioned (enfant: nouveau texte ("\ u 26BE"), textDirection: textDirection.ltr, style: new TextStyle (fontSize: 70.0)), : 50.0, top: animation.value // propriété animée)], textDirection: TextDirection.ltr,); Après un redémarrage à chaud, votre application devrait maintenant afficher l'animation suivante:
Vous connaissez maintenant les bases de la création d'animations d'interpolation à l'aide du framework Flutter. Dans ce tutoriel, vous avez également appris à les rendre plus naturels à l'aide de courbes. Comprenez bien que dans le mode lent, qui est le mode par défaut lors du développement, les animations peuvent sembler un peu lentes et instables. Ce n'est qu'en mode de publication que vous pouvez voir leur véritable performance..
Pour en savoir plus, consultez la documentation officielle.
