Android: vues personnalisées animées

EDIT 2: nouveau guide de formation

Le site des Développeurs a publié un guide de formation pour l'INTERFACE utilisateur choses liées, c'est l'index:

  • Animations Vue D'Ensemble
  • Aperçu De L'Animation Des Propriétés
  • animer des graphismes dessinables
  • Afficher ou de masquer une vue à l'aide de l'animation
  • Déplacer une Vue de l'Animation
  • Déplacer les vues à l'aide d'un flirt animation
  • agrandir la vue avec un zoom animation
  • animer le mouvement en utilisant la physique du printemps
  • mise à jour automatique 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
  • démarrer une activité en utilisant une animation

si vous êtes intéressé par l'un de ceux-ci, voici le lien: https://developer.android.com/training/animation/

modifier: somme des réponses

j'ai trouvé 5 façons d'animer dans Android:

  1. animer le propriétés d'un ViewAnimation De Propriété pour passer en douceur rotation,alpha, scale etc.

  2. Les Animations D'Images (AnimationDrawable): changer les images rapidement, de sorte qu'elle semble animée

  3. concevoir les images avec vecteurs (VectorDrawable et animer en les éditant au fil du temps avec Animated Vectordrawable.

  4. RemplaceronDraw() sur un View et effectuez Dessin Personnalisé en peignant dans la toile.

  5. Utiliser Lottie, ce qui reproduit les animations D'après les effets. De nombreuses animations sont disponibles à LottieFiles.

cependant, Android fournit certains outils intégrés comme Scenes (qui vous permettent d'animer la transition entre plusieurs mises en page qui partagent le Views),Shared elements (qui vous permet de faire la commotion de passage un View d'un Activity à un autre) etc.

un grand nombre (si ce n'est la totalité) de ces caractéristiques ont été ajoutées dans API 21 cliquez ici ici pour plus d'informations.

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

Dernière, quelques outils intéressants:

  • Mac outil pour enregistrer L'écran Android sur GitHub.

  • Vidéo en GIF convertisseur en ligne.

Remarque:

je suis conscient Android fournit des transformations telles que scale,alpha, rotate,translation etc.

Exemples

il y a deux exemples que j'aimerais examiner et comparer.

1 - Affichage Personnalisé des animations

Pour exemple, remplir un verre d'eau ou tracer un chemin.

2 - Complexe des animations

par exemple, L'application StackExchange pour Android, l'animation d'écran de connexion (Je n'ai pas pu trouver une vidéo dessus, aussi, n'a pas vérifié si se comporte le même dans iOS).

Question

pour le premier exemple, Je ne peux pas penser à une autre façon que de jouer des GIFs, ou de changer manuellement des images après peu de temps période.

je ne pense pas que c'est le cas, c'est pourquoi je voudrais demander, (1) savez-vous comment il est fait?

Concernant le deuxième exemple, une seule idée m'est venue à mon esprit, et qui est un Path et en déplaçant le View en conséquence en le faisant passer après animate(). (2) Est-ce possible?

mis à part ce qui précède, (3) connaissez-vous d'autres techniques pour lire les animations? (Scene transitions -mentionné dans une réponse -)

Merci de les partager! Remercier.

18
demandé sur JonZarate 2017-03-13 15:25:31

4 réponses

l'animation" remplir un verre d'eau " est un canditate direct de mise en œuvre par animation de cadre, c.-à-d. changer des images l'une après l'autre. Ici vous pouvez voir un beau post de blog décrivant comment mettre en œuvre ce genre d'animation, qui est essentiellement la même que pour "remplir un verre d'eau" vous avez mentionné:

enter image description here

l'autre animation semble un peu difficile au début œil.

enter image description here

mais après avoir activé "Show layout bounds" vous pouvez voir qu'il n'y a pas de magie là. Fondamentalement, c'est juste une animation de traduction, qui traduit une vue d'une position à une autre. Dans le cas de cette animation la partie difficile est d'implémenter l'algorithme de trouver des coordonnées de traduction. Après cela l'animation est juste quelques lignes de code via transition de scène animation.

// 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

cadre de transition fera le reste pour vous. Il trouvera le delta et réalisera des animations pour vous. Ici vous trouverez un bel article par Lucas Rocha.

10
répondu azizbekian 2017-03-15 20:12:52

connaissez-vous d'autres techniques pour lire les animations?

dans Android vous avez essentiellement 3 façons de mettre en œuvre des animations:

  • animer la vue (Scale, alpha, rotate, etc) en utilisant simplement view.startAnimation(...)
  • animer le Drawable (selon le Drawable, cela peut être n'importe quoi, des drawables vectoriels animés à les animations d'images)
  • Faire de dessin personnalisé et animation

évidemment, il est plus facile d'animer une vue par des méthodes de framework que de créer une animation dessinable, et de créer une animation dessinable (xml) que de faire du dessin personnalisé.

vous avez mentionné lottie, qui est sorti il y a quelques jours. Nous verrons si cela fonctionne bien, mais cela semble très prometteur. Sous le capot lottie va Parser le json et faire un peu de dessin personnalisé en utilisant Canvas et Path (3ème point ci-dessus)

Si vous pouvez obtenir c'est probablement la solution "la plus facile" pour les animations complexes (et cross platform!)

les gens ont aussi commencé à partager des animations, vous pouvez les trouver ici:

http://www.lottiefiles.com/

savez-vous comment il est fait?

(1) de la vidéo on dirait qu'ils n'certains de dessin personnalisé.

  • Dessiner et remplir un Path pour l'eau, animer le sommet avec quelques vagues tandis qu'il s'anime, et saupoudrer de quelques taches blanches.
  • dessiner la forme du verre autour de lui

Cela impliquera la création d'une vue personnalisée et/ou drawable et en remplaçant onDraw(Canvas)Path.lineTo ainsi qu'un arc, un cube ou un quad feront l'affaire...Je ne suis ni concepteur ni spécialiste des vecteurs:)

je ne pense pas que cela pourrait facilement être réalisé à l'aide de Dessins animés de vecteurs, mais vous on pourrait le faire en appliquant une animation path morph. (Aussi les dessins vectoriels animés ne sont supportés que sur 21+ si Je ne me trompe pas)

la vidéo (2) ne fait qu'animer un chemin et remuer un drapeau. Ceci peut être réalisé en utilisant AnimatedVectorDrawables (comme par exemple ce blog shows) et de couper le chemin beginnings / ends ou encore en faisant un dessin personnalisé (et donc aussi en supportant des périphériques pré lolipop) en animant un chemin, p.ex. en utilisant PathMeasure.getSegment() pour continuuously animer le chemin.

l'animation (3), comme déjà souligné par azizbekians réponse est le premier type mentionné, il suffit d'animer (déplacement et mise à l'échelle) les vues.

en ce qui concerne le second exemple, une seule idée m'est venue à l'esprit, et c'est de définir un chemin et de déplacer la vue en conséquence en la passant d'une façon ou d'une autre après animate(). (2) est-ce possible?

déplacer des vues le long d'un chemin est évidemment possible, mais alors la vue bougerait, et vous auriez tout de même besoin de trouver un moyen de dessiner le chemin qui la suit, comme expliqué ci-dessus.

6
répondu David Medenjak 2017-05-23 11:55:19

je voudrais suggérer une bibliothèque que j'ai écrite il y a un certain 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 un très simple démo ici. Alors que mes démos, franchement, ne sont pas impressionnants, ils démontrent la puissance de la bibliothèque et surtout comment l'utiliser.

il fonctionne avec Android TimeInterpolator et l'un de ses enfants (ainsi que les ).

les animations sont dessinées entièrement en utilisant la toile, la seule différence ici est que vous pouvez obtenir une valeur animée, qui change selon le TimeInterpolator en fonction du temps.

Vous pouvez ajouter autant d'animations que vous le souhaitez à votre Vue, les contrôler indépendamment l'une de l'autre. Et en plus de cela, vous n'êtes pas limité à dessiner des choses non-animées. Il y a une méthode dédiée pour cela (onDrawStatics).

1
répondu user3705007 2017-03-31 13:14:27

pour votre vue personnalisée, je vous suggère d'identifier les propriétés sur lesquelles vous voulez animer .

disons un ClockView, vous après avoir mis paint, stroke et ainsi de suite dans OnDraw()

vous pourriez vouloir avoir des Asyncmethodes / Runnables qui mettent à jour les propriétés en continu en arrière-plan, résultant en animation image par image , mais ce N'est pas L'Animation Fraame en fait , parce que vous animez seulement les propriétés de vue (tournez à gauche) et pas le tentire cadre

Il y a des dizaines d'exemples là-bas, avec peu de googling vous pouvez DIY

-2
répondu Nandhu 2017-03-15 18:34:36