web-dev-qa-db-fra.com

Comment créer un type d'animation WhatsApp pour ouvrir le menu à partir de la barre d'outils (barre d'action)

La description:

  1. J'ai récemment mis à jour WhatsApp et j'ai remarqué l'animation de l'élément de menu cliqué sur la barre d'outils. Comment obtenir cet effet?
  2. Existe-t-il des projets open source pour y parvenir?
  3. Je n'ai posté aucun code car. Je ne sais pas comment ils le font.

Snapshot-1: Avant de cliquer sur le bouton de pièce jointe dans le menu  img

Snapshot-2: Après avoir cliqué sur le bouton de pièce jointe dans le menu

img2

Comment y parvenir?

androidandroid-menuwhatsapp
30
Devrath

On dirait qu'ils ont "porté" l'animation Lollipop dans les appareils pré-L. La façon la plus simple de le faire est d'utiliser des bibliothèques telles que Igvalle Material-Animation (voir # 4). Son minSdk est 16, mais j'espère que vous pourrez le diminuer pour 14 ou moins.

Quelques autres bibliothèques: TransitionsBackport , PreLollipopTransition , transitions-partout .

Veuillez me faire savoir si vous créez cette animation!

14
anil

Il s'agit d'un lien vers une page Web qui montre comment le mettre en œuvre. J'espère que cela aide http://blog.grafixartist.com/circular-reveal-effect-like-whatsapp-in-Android/ .

13
mik dass

Oui, nous pouvons maintenant utiliser l'effet de révélation circulaire sur 2.3 +

Nous pouvons obtenir cet effet en utilisant ceci Circular Reveal Library .

ajout de la dépendance de bibliothèque

 dependencies {
        compile ('com.github.ozodrukh:CircularReveal:1.3.1@aar') {
            transitive = true;
        }
    }

Utilisez des RevealFrameLayout et RevealLinearLayout réguliers ne vous inquiétez pas, seule la cible sera coupée:)

<io.codetail.widget.RevealFrameLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Put more views here if you want, it's stock frame layout  -->

    <Android.support.v7.widget.CardView
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/awesome_card"
        style="@style/CardView"
        app:cardBackgroundColor="@color/material_deep_teal_500"
        app:cardElevation="2dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginTop="8dp"
        Android:layout_width="300dp"
        Android:layout_height="300dp"
        Android:layout_gravity="center_horizontal"
        />

</io.codetail.widget.RevealFrameLayout>

et dans le code ajoutez

 View myView = findView(R.id.awesome_card);

    // get the center for the clipping circle
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;

    // get the final radius for the clipping circle
    int dx = Math.max(cx, myView.getWidth() - cx);
    int dy = Math.max(cy, myView.getHeight() - cy);
    float finalRadius = (float) Math.hypot(dx, dy);

    SupportAnimator animator =
            ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(1500);
    animator.start();
9
Mr Robot

Je l'ai essayé, je n'ai pas pu le rendre compatible avec les appareils pré-L, mais je pense que c'est plutôt cool.

Allez le vérifier sur GitHub

6
Tarek K. Ajaj