如何制作whatsapp类型的动画以从工具栏（操作栏）打开菜单

Question

说明：

1. 我最近更新了 whatsapp 并注意到 单击工具栏上的菜单项的动画。如何实现这一目标 效果？
2. 是否有任何开源项目可以实现这一目标？
3. 我没有发布任何代码，因为。我不知道他们在做什么 它。

Snapshot-1：点击菜单中的附件按钮之前

---

Snapshot-2：点击菜单中的附件按钮后

---

如何实现？

Answer 1

似乎他们在 pre-L 设备中“移植”了棒棒糖动画。最简单的方法是使用像Igvalle's Material-Animation 这样的库（参见#4）。它的minSdk是16，但我希望你能把它减少到14或以下。

其他一些库：TransitionsBackport、PreLollipopTransition、transitions-everywhere。

如果你制作了这个动画，请告诉我！

Answer 2

我试了一下，我无法让它与 pre-L 设备兼容，但我认为它看起来很酷。

去GitHub看看吧

Answer 3

这是一个网页链接，展示了如何实现它。希望对 http://blog.grafixartist.com/circular-reveal-effect-like-whatsapp-in-android/ 有所帮助。

Answer 4

是的，我们现在可以在 2.3+ 上使用圆形显示效果

我们可以通过使用这个Circular Reveal Library来实现这个效果。

添加库依赖

 dependencies {
        compile ('com.github.ozodrukh:CircularReveal:1.3.1@aar') {
            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'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>

并在代码中添加

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