Créer des animations avec MotionLayout pour Android

Grâce à sa remarquable polyvalence, le ConstraintLayout widget est devenu le «couteau suisse» des mises en page pour les développeurs d’applications Android. Cependant, l’ajout d’animations complexes à son contenu, bien que possible, peut prendre beaucoup de temps. C’est pourquoi Google a introduit le MotionLayout widget dans I / O 2018.

le MotionLayout widget, qui fait désormais partie de la bibliothèque de support d’Android, étend le ConstraintLayout widget. C’est un widget unique qui vous permet d’animer son contenu de manière déclarative en utilisant uniquement XML. De plus, il offre un contrôle fin sur toutes ses animations.

Dans ce tutoriel, je vais vous montrer comment l’ajouter à vos projets Android Studio et créer quelques animations différentes avec.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de:

  • Studio Android 3.1.3 ou supérieur
  • un appareil ou un émulateur exécutant l’API Android de niveau 21 ou supérieur
  • une compréhension de base du ConstraintLayout widget

1. Ajouter des dépendances

Pour pouvoir utiliser le MotionLayout widget dans votre projet Android Studio, vous devez disposer de la dernière version de la bibliothèque de prise en charge de la mise en page de contraintes en tant que implementation dépendance. De plus, afin d’éviter les conflits de version, assurez-vous d’inclure une dépendance pour la dernière version stable de la bibliothèque de support v7 appcompat.

En conséquence, ajoutez le code suivant au app modules build.gradle fichier:

2. Définir une mise en page

le MotionLayout widget peut tout faire ConstraintLayout widget peut. Par conséquent, vous pouvez remplacer librement n’importe quelle instance de ce dernier par le premier. Pour l’instant, cependant, je vous suggère de créer un nouveau fichier XML de mise en page et d’ajouter le MotionLayout widget en tant qu’élément racine.

Tout au long de ce didacticiel, nous animerons un ImageView widget. Alors ajoutez-le comme premier enfant de la mise en page.

Vous êtes libre d’utiliser n’importe quel dessinable comme source de ImageView widget. Dans le code ci-dessus, j’utilise une couleur dessinable.

Ensuite, ajoutez un bouton sur lequel vous pouvez appuyer pour démarrer les animations. Le code suivant vous montre comment le positionner au centre de la disposition:

De plus, pour suivre la progression des animations, ajoutez un SeekBar widget à la mise en page et placez-le sous le bouton. Voici comment:

Enfin, comme il existe un gestionnaire d’événements au clic associé au bouton, assurez-vous de le définir dans votre activité.

3. Créer une scène de mouvement

Vous avez peut-être remarqué que nous n’avons ajouté aucune contrainte à la ImageView widget lors de la définition de la mise en page. C’est parce que nous les ajouterons à une scène de mouvement à la place. Une scène de mouvement est un fichier XML qui contient des détails sur l’animation que vous souhaitez créer avec un MotionLayout widget.

Pour créer une nouvelle scène de mouvement, créez un fichier de ressources XML et ajoutez un MotionScene élément à elle.

Une scène animée contient ConstraintSet des éléments spécifiant les contraintes à appliquer à un widget à différents points de l’animation. Les fichiers de scène de mouvement contiennent généralement deux jeux de contraintes: un pour le début de l’animation et un pour la fin.

Le code suivant vous montre comment créer deux jeux de contraintes qui aideront le MotionLayout widget déplacer le ImageView widget du coin inférieur droit de l’écran au coin supérieur gauche:

Notez que chaque ConstraintSet L’élément doit toujours spécifier à la fois la position souhaitée et la taille souhaitée. Ceci est important car il écrasera toutes les informations de mise en page précédemment définies.

En relation :  Les 7 meilleures applications Android TV Launcher

Pour aider le MotionLayout widget comprend l’ordre dans lequel les ensembles de contraintes doivent être appliqués, vous devez ensuite créer un Transition élément. En utilisant son nom intuitif constraintSetStart et constraintSetEnd attributs, vous pouvez spécifier quel ensemble doit être appliqué en premier et lequel en dernier. le Transition element vous permet également de spécifier la durée de l’animation.

À ce stade, la scène de mouvement est terminée. Cependant, le MotionLayout widget n’en est toujours pas conscient. Revenez donc au fichier XML de mise en page, ajoutez un layoutDescription attribut au widget et définissez sa valeur sur le nom du fichier de scène de mouvement.

Si le nom de votre fichier de scène de mouvement est my_scene.xml, votre MotionLayout Le widget devrait maintenant ressembler à ceci:

4. Démarrez l’animation

Lorsque vous exécutez l’application, le MotionLayout widget appliquera automatiquement le jeu de contraintes spécifié dans le constraintSetStart attribut du Transition élément. Par conséquent, pour démarrer l’animation, tout ce que vous avez à faire est d’appeler le transitionToEnd() méthode du widget. Le code suivant, qui doit être ajouté au gestionnaire d’événements au clic que vous avez créé à une étape précédente, vous montre comment:

À ce stade, si vous exécutez l’application et appuyez sur le bouton, vous devriez pouvoir voir le ImageView le widget se déplace en douceur sur l’écran.

5. Gérer les événements d’animation

En joignant un TransitionListener objecter à la MotionLayout widget, vous pouvez suivre de près la progression de l’animation.

le TransitionListener l’interface a deux méthodes abstraites, et Android Studio générera automatiquement des stubs pour eux.

le onTransitionCompleted() est appelée lorsqu’une transition d’un jeu de contraintes à un autre est terminée. Pour l’instant, utilisons-le pour réinitialiser les contraintes du ImageView widget en appelant le transitionToStart() méthode à l’intérieur.

le onTransitionChange() est appelée à chaque fois que la progression de l’animation change. En tant que tel, la progression est un nombre à virgule flottante compris entre zéro et un. Le code suivant vous montre comment mettre à jour le SeekBar en fonction de la progression de l’animation:

Allez-y et exécutez à nouveau l’application pour voir deux animations maintenant.

6. Créer des images clés

Dans notre animation, le ImageView widget se déplace dans un chemin qui ressemble à une ligne droite. C’est parce que le MotionLayout widget ne dispose que de deux points pour travailler: le point de départ, qui se trouve dans le coin inférieur droit de l’écran, et le point de fin, qui est dans le coin supérieur gauche de l’écran. Si vous souhaitez modifier la forme du tracé, vous devrez fournir quelques points intermédiaires, situés entre les points de départ et d’arrivée. Pour ce faire, vous devrez créer de nouvelles images clés.

Avant de commencer à créer des images clés, vous devez ajouter un KeyFrameSet élément à la Transition élément de votre scène de mouvement. À l’intérieur du nouvel élément, vous êtes libre de créer n’importe quel nombre d’images clés.

le MotionLayout widget prend en charge de nombreux types d’images clés. Dans ce didacticiel, nous ne travaillerons qu’avec deux types: KeyPosition cadres et KeyCycle cadres.

En relation :  7 fonctionnalités secrètes pour iPhone qui impressionneront vos amis

KeyPosition les cadres sont ceux qui vous aident à modifier la forme du tracé. Lors de leur création, assurez-vous de fournir l’ID du widget cible, une position le long de la chronologie, qui peut être n’importe quel nombre compris entre 0 et 100, et les coordonnées X ou Y souhaitées spécifiées en pourcentage. Les coordonnées peuvent être relatives aux axes X ou Y réels ou être relatives au chemin lui-même.

Le code suivant vous montre comment créer deux images clés qui forcent le ImageView widget pour suivre un chemin qui évite les collisions avec le bouton et la barre de recherche:

Si vous exécutez l’application maintenant, vous devriez voir une animation qui ressemble à ceci:

Vous êtes, bien sûr, libre d’ajouter d’autres images clés. Par exemple, en ajoutant l’image clé suivante vers la fin de la chronologie, vous pouvez ImageView le widget suit un chemin plus ondulé:

En utilisant un KeyCycle cadre avec le KeyPosition images, vous pouvez ajouter des oscillations à l’animation. Lors de sa création, vous devez à nouveau fournir l’ID du widget cible, une position le long de la chronologie et la valeur souhaitée de la propriété qui doit osciller d’avant en arrière. De plus, vous devez configurer un oscillateur en fournissant des détails tels que la forme d’onde à utiliser et la période d’onde.

Le code suivant crée un KeyCycle cadre qui utilise un oscillateur sinusoïdal pour faire pivoter périodiquement le ImageView widget de 50 degrés:

En exécutant à nouveau l’application, vous devriez voir une animation qui ressemble à ceci:

sept. Rendre les widgets animés interactifs

Pendant tout ce temps, vous avez appuyé sur un bouton pour démarrer l’animation. Un tel bouton n’est cependant pas toujours nécessaire car le MotionLayout widget vous permet d’attacher directement des gestionnaires d’événements tactiles aux widgets en cours d’animation. Actuellement, il prend en charge les événements on-click et on-swipe.

Par exemple, vous pouvez ajouter ce qui suit OnClick élément, qui cible le ImageView widget, à l’intérieur du Transition élément de votre scène de mouvement pour rendre le bouton redondant:

De même, vous pouvez utiliser un OnSwipe élément pour permettre à l’utilisateur de faire glisser manuellement ImageView widget sur l’écran. Lors de la création de l’élément, vous devez vous assurer de fournir la bonne direction de glissement et le côté du widget qui doit servir de poignée de glissement.

Si vous exécutez à nouveau l’application, vous devriez maintenant pouvoir faire glisser le ImageView widget.

Conclusion

Vous savez maintenant comment utiliser le MotionLayout widget pour ajouter rapidement des animations complexes et interactives à vos applications Android. Vous pouvez être sûr que les animations s’exécuteront sans décalage ni instabilité sur la plupart des appareils, à condition d’éviter les vues imbriquées.

Il convient de noter que les prochaines versions d’Android Studio incluront un éditeur visuel de mouvement, ce qui est susceptible d’améliorer encore la convivialité du widget.

Pour en savoir plus, consultez le site officiel Documentation.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.