Как сделать тип анимации whatsapp для открытия меню с панели инструментов (панель действий)

Описание:

  • Недавно я обновил whatsapp и заметил, что анимация для пункта меню, нажатого на панели инструментов. Как достичь этого эффект?
  • Есть ли какие-либо проекты с открытым исходным кодом для достижения этого?
  • Я не размещал никакого кода, потому что. Я понятия не имею, как они это делают он.

Снимок-1: перед нажатием кнопки вложения в меню img

Снимок-2: после нажатия кнопки вложения в меню

img2

Как достичь этого?

Ответы

Ответ 1

Похоже, что они "портировали" анимацию леденец в устройствах pre-L. Самый простой способ сделать это - использовать библиотеки типа Igvalle Material-Animation (см. № 4). Его minSdk - 16, но я надеюсь, что вы можете уменьшить его на 14 или ниже.

Некоторые другие библиотеки: TransitionsBackport, PreLollipopTransition, transitions-everywhere.

Пожалуйста, дайте мне знать, если вы создадите эту анимацию!

Ответ 3

Да, мы можем использовать эффект кругового раскрытия теперь на 2.3 +

Мы можем добиться этого эффекта, используя эту Circular Reveal Library.

добавление зависимости библиотеки

 dependencies {
        compile ('com.github.ozodrukh:CircularReveal:[email protected]') {
            transitive = true;
        }
    }

Использовать регулярные RevealFrameLayout и RevealLinearLayout не волнуйтесь, только цель будет обрезана:)

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

и в коде добавить

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

Ответ 4

Я попробовал, я не смог сделать его совместимым с устройствами pre-L, но я думаю, что это выглядит довольно круто.

Go Посмотрите на GitHub