Android: vues personnalisées animées

Question

EDIT 2: nouveau guide officiel de formation

Le site des développeurs a publié un guide de formation pour les éléments liés à l'interface utilisateur, voici l'index:

Aperçu des animations
Présentation de l'animation de la propriété
Animer des graphiques dessinables
Révéler ou masquer une vue à l'aide d'une animation
Déplacer une vue avec animation
Déplacer des vues à l'aide d'une animation fling
Agrandir une vue à l'aide d'une animation de zoom
Animer le mouvement en utilisant la physique du printemps
Animer automatiquement les mises à jour de la mise en page
Animer les modifications de mise en page à l'aide d'une transition
Créer une animation de transition personnalisée
Commencer une activité en utilisant une animation

Si vous êtes intéressé par l'un de ces éléments, voici le lien: https://developer.Android.com/training/animation/

EDIT: Résumé des réponses

J'ai trouvé 5 façons d'animer sous Android:

Animez les propriétés d'une View avec Property Animation pour changer en douceur rotation, alpha, scale etc.
Animations d'images ( AnimationDrawable ): permet de modifier rapidement les images afin qu'elles soient animées.
Concevez les images avec vectors ( VectorDrawable ) et animate en les modifiant au fil du temps avec AnimatedVectorDrawable .
Remplacez onDraw() sur une View et effectuez Dessin personnalisé en peignant dans la zone de dessin.
Utilisez Lottie , ce qui reproduit les animations d’After Effects. Nombreuses animations disponibles sur LottieFiles .

Cependant, Android fournit également des outils intégrés, tels que Scenes (qui vous permettent d’animer la transition entre plusieurs présentations partageant la Views), Shared elements (qui vous permet de passer d'une View d'une Activity à une autre), etc.

Beaucoup (si pas toutes) de ces fonctionnalités ont été ajoutées dans API 21, cliquez ici ici pour plus d'informations.

Voici quelques articles/blogs intéressants sur l'animation:

Une sous-catégorie sur un site Web créé par Google et appelée material.io : Personnalisation de la création .
Comment nous concevons une belle animation : animation de train avec des vecteurs animés.
Fonctionnement des transitions Android .
Animation à l'infini : animation Bluetooth avec vecteurs
Animations de cadres sous Android : remplir un cœur par rotation d'images.

Enfin, quelques outils intéressants:

Outil Mac pour enregistrer l'écran Android sur GitHub .
Convertisseur vidéo en GIF en ligne .

Remarque

Je sais que Android fournit des transformations telles que scale, alpha, rotate, translation etc.

Exemples

Il y a 2 exemples que je voudrais regarder et comparer.

1 - Animations de vue personnalisées

Par exemple, remplir un verre d’eau ou tracer un chemin .

2 - Animations en vue complexe

Par exemple, StackExchange App pour Android, animation de l'écran de connexion (impossible de trouver une vidéo dessus, n'a également pas vérifié si le comportement est le même sous iOS).

Question

Pour le premier exemple, je ne vois pas d'autre moyen que de lire des GIF ou de modifier manuellement les images après une courte période.

Je ne pense pas que ce soit le cas, c’est pourquoi j’aimerais demander: (1) savez-vous comment cela se passe?

En ce qui concerne le deuxième exemple, une seule idée m’est venue à l’esprit: définir une Path et déplacer la View en conséquence en la passant d’une manière ou d’une autre après animate(). (2) Est-ce possible?

En dehors de ce qui précède, (3) connaissez-vous d'autres techniques pour lire des animations? (Comme Scene transitions - mentionné dans une réponse-)

Partagez s'il vous plait! Je vous remercie.

azizbekian · Accepted Answer

L’animation "Remplir un verre d’eau" permet d’implémenter une animation par images, c’est-à-dire de changer les images les unes après les autres. Ici vous pouvez voir un billet de blog de Nice décrivant comment mettre en oeuvre ce type d’animation, ce qui revient essentiellement à "remplir un verre d’eau" que vous avez mentionné:

L'autre animation semble un peu difficile à première vue.

Mais après avoir activé "Afficher les limites de la mise en page", vous pouvez constater qu’il n’ya pas de magie là-bas. Fondamentalement, il s'agit simplement d'une animation de traduction, qui traduit une vue d'une position à une autre. Dans le cas de cette animation, la partie difficile consiste à implémenter l'algorithme de recherche des coordonnées de traduction. Après cette animation, il ne reste que quelques lignes de code via animation de transition de scène .

// assuming at this step all the views are at the initial position at x0, y0 TransitionManager.beginDelayedTransition(rootLayout); // here set view coordinates to x1, y1 - the final position

Le cadre Transitions fera le reste pour vous. Il trouvera le delta et effectuera une animation pour vous. Ici vous trouverez un article de Nice de Lucas Rocha .

David Medenjak · Answer

connaissez-vous d'autres techniques pour jouer aux animations?

Sous Android, vous disposez de 3 méthodes pour implémenter des animations:

Animer la vue (échelle, alpha, rotation, etc.) en utilisant simplement view.startAnimation(...)
Animer le dessin (En fonction du dessin, il peut s’agir d’un dessin vectoriel animé à animations )
Faire des dessins et des animations personnalisés

Évidemment, il est plus facile d’animer une vue à l’aide de méthodes framework que de créer une animation, et créer un dessin (XML) est plus facile que de faire un dessin personnalisé.

Vous avez parlé de Lottie, qui vient de paraître il y a quelques jours. Nous verrons comment cela se passe, mais cela semble très prometteur. Sous le capot, Lottie analysera le JSON et fera un dessin personnalisé en utilisant Canvas et Path (3ème point ci-dessus)
Si vous pouvez mettre la main sur After Effects, il s’agit probablement de la solution la plus "simple" pour les animations complexes (et multiplate-forme!).

Les gens ont également commencé à partager des animations, vous pouvez les trouver ici:
http://www.lottiefiles.com/

savez-vous comment c'est fait?

La vidéo (1) ressemble à un dessin personnalisé.

Dessinez et remplissez une Path pour l’eau, animez le sommet avec des vagues pendant qu’elle s’anime et saupoudrez de quelques taches blanches.
Dessine la forme du verre autour de lui

Cela impliquera de créer une vue personnalisée et/ou de dessiner et de surcharger onDraw(Canvas) Path.lineTo ainsi que des arcs, des cubes ou des quadruches feront l'affaire… Je ne suis ni un concepteur ni un spécialiste des vecteurs :)

Je ne pense pas que cela pourrait être facilement réalisé en utilisant vector drawable animated , mais vous pouvez le faire en appliquant une animation de morph de chemin. (Les dessins vectoriels animés ne sont également pris en charge que par 21+ si je ne me trompe pas)

La vidéo (2) ne fait qu'animer un chemin et agite un drapeau. Cela peut être réalisé en utilisant AnimatedVectorDrawables (comme par exemple ce blog montre) et en découpant les débuts/fins du chemin ou encore en créant un dessin personnalisé (et donc en prenant également en charge des périphériques pré-lolipop) en animant un chemin utilisez PathMeasure.getSegment() pour animer continuellement le chemin.

L'animation (3), comme indiqué par azizbekians answer est le premier type mentionné, n'animant que les vues (animées et redimensionnées).

En ce qui concerne le deuxième exemple, une seule idée m’est venue à l’esprit: définir un chemin et déplacer la vue en conséquence en le passant d’une manière ou d’une autre après animate (). (2) Est-ce possible?

Déplacer des vues le long d'un chemin est évidemment possible, mais la vue se déplacerait et vous auriez toujours besoin de trouver un moyen de tracer le chemin qui le suivrait, comme expliqué ci-dessus.

user3705007 · Answer

J'aimerais suggérer une bibliothèque que j'ai écrite il y a quelque temps (publiée récemment), qui vous permet de créer des vues personnalisées et d'y ajouter des animations.

Vous pouvez le trouver ici et une très simple démonstration ici . Bien que mes démonstrations ne soient franchement pas impressionnantes, elles démontrent le pouvoir de la bibliothèque et surtout son utilisation.

Il fonctionne avec TimeInterpolator d'Android et ses enfants (ainsi que ceux personnalisés).

Les animations sont entièrement dessinées à l’aide de Canvas. La seule différence est qu’il est possible d’obtenir une valeur animée, qui change en fonction de TimeInterpolator en fonction du temps.

Vous pouvez ajouter autant d’animations que vous le souhaitez dans votre vue et les contrôler indépendamment les unes des autres. Et en plus de cela, vous n'êtes pas limité à dessiner des choses non-animées. Il existe une méthode dédiée à cela (onDrawStatics).