icono - menu android studio

Cómo hacer una animación tipo whatsapp para abrir el menú desde la barra de herramientas(barra de acción)

Question

Descripción:

1. Recientemente actualicé WhatsApp y noté que la animación del elemento del menú hacía clic en la barra de herramientas. ¿Cómo lograr este efecto?
2. ¿Hay algún proyecto de código abierto para lograr esto?
3. No he publicado ningún código porque. No tengo ni idea de cómo lo están haciendo.

Instantánea-1: antes de hacer clic en el botón adjunto en el menú

Instantánea-2: después de hacer clic en el botón adjunto en el menú

¿Cómo lograr esto?

Answer 1

Este es un enlace a la página web que muestra cómo implementarlo. Espero que ayude a blog.grafixartist.com/… .

Answer 2

Lo intenté, no pude hacerlo compatible con dispositivos pre-L pero creo que se ve muy bien.

Ve a verlo en GitHub

Answer 3

Sí, podemos usar el efecto de revelación circular ahora en 2.3+

Podemos lograr este efecto utilizando esta Biblioteca de Revelación Circular .

añadiendo la dependencia de la biblioteca

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

Use RevealFrameLayout y RevealLinearLayout regulares, no se preocupe, solo el objetivo será recortado :)

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

y en el código agregar

 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();

Answer 4

Parece que "portaron" la animación de piruletas en dispositivos pre-L. La forma más sencilla de hacerlo es usar bibliotecas como la Animación de materiales de Igvalle (ver # 4). Su minSdk es 16, pero espero que puedas disminuirlo por 14 o menos.

Algunas otras bibliotecas: TransitionsBackport , PreLollipopTransition , transitions-everywhere .

Por favor, avísame si creas esta animación!