37 votes

Animations de découverte de fonctionnalités pour Android

Depuis le mois de Mai, Google a mis à jour leur Matériel de Conception de lignes directrices sur leur site web. J'ai vu un intéressant et cool modèle de conception dans l'une des nouvelles sections nommé Fonctionnalité de découverte.

Je souhaite la mise en place de l'animation pour "découvrir" le Tiroir de Navigation bouton. Il y a de l'animation dans la dernière mise à jour de Google Fit, pour la navigation tiroir et flottant sur le bouton d'action.

Comme souvent, pour Android animations, Google fournira une belle et impressionnante de l'INTERFACE utilisateur de la ligne directrice, mais nous n'avons pas plus d'informations pour le développement de nos propres applications.

Savez-vous si il y a des indigènes des solutions avec Android bibliothèques pour mettre en oeuvre ce genre d'animations? Si oui, est-il disponible sous Android 5.0 (API 21) - il peut être au-dessus de l'Androïde 4,1+?

Edit : j'ai fait un projet Github pour réaliser la même animation. Vous pouvez le trouver ici : https://github.com/Guimareshh/Feature-discovery-animations

Merci !

8voto

Aditya Vyas-Lakhan Points 8523

Vous devez créer une animation personnalisée ou utiliser Ripple Effect + Reveal et le définir sur l'icône du tiroir de navigation.

Animation de révélation circulaire

 void enterReveal() {
    // previously invisible view
    final View myView = findViewById(R.id.my_view);

    // get the center for the clipping circle
    int cx = myView.getMeasuredWidth() / 2;
    int cy = myView.getMeasuredHeight() / 2;

    // get the final radius for the clipping circle
    int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2;

    // create the animator for this view (the start radius is zero)
    Animator anim =
        ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

    // make the view visible and start the animation
    myView.setVisibility(View.VISIBLE);
    anim.start();
}
 

4voto

GensaGames Points 1513

Pour répondre à votre question, Google fournit toujours de nouveaux échantillons de Widget intéressant Composants. La plupart d'entre eux seront ajoutés uniquement à une nouvelle version d'Android. Et il y a différentes raisons pour cela. Par exemple, en raison de nouveaux widgets utilisation des ressources et de travailler uniquement sur la nouvelle version d'Android, qui dispose d'une INTERFACE utilisateur mise à jour du moteur. Et d'autres...

C'est pourquoi, il n'est pas officielle de Google Révèlent animation, qui ne fonctionne que sur Android 5.0 >.

Mais il y a beaucoup de backports pour que:

Prendre un coup d'oeil toutes disponibles et non officiel backports pour Android Génial l'INTERFACE utilisateur Android.

Lorsque Google a lancé Android Matériau - il n'y avait pas de bibliothèque pour tous les éléments. Mais en peu de temps, par les différents développeurs ont été écrit de nombreux libs. Mais après que la popularité, Google introduire toutes les bibliothèques pour que les widgets.


Par conséquent, il n'y a pas backports et le plus probable, Google ne mettra en place que les widgets. Mais à l'écoute de votre question, je pense que vous pouvez le faire en utilisant non officiel backports, lié ci-dessus.

4voto

Cilenco Points 462

J'ai aussi créé ce DesignPattern dans un Affichage personnalisé. Vous pouvez le trouver ici. Veuillez noter que ceci est mon premier publié Affichage personnalisé et il est toujours en développement (donc il pourrait y avoir quelques bugs et un peu de la documentation est absent), mais il devrait être assez bon pour une utilisation quotidienne.

Pour l'utiliser ajouter à la bibliothèque de vos dépendances:

compile 'com.cilenco.libraries:featurediscovery:1.0.2'     or
compile 'com.cilenco.libraries:featurediscovery:+'         always newest version

Après cela, vous êtes en mesure de créer un DiscoveryView comme ça. Extraction de tous les autres fonctions pour ajuster l'apparence et le contrôle de la Vue.

DiscoveryView discoveryView = new DiscoveryView.Builder(context, view)
.setPrimaryText(R.string.header)
.setSecondaryText(R.string.description)
.setOnClickListener(this)
.build();

discoveryView.show();

Pour faire de ce point de vue, même mieux s'il vous plaît n'hésitez pas à signaler les problèmes et de faire des pull requests pour le dépôt si vous trouvez des bugs ou avez des idées nouvelles pour elle.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X