如何制作whatsapp类型的动画以从工具栏打开菜单(动作栏)

Question

描述:

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

快照-1:单击菜单中的附件按钮之前

---

快照-2:单击菜单中的附件按钮

---

如何实现这一目标？

Answer 1

似乎他们在pre-L设备中"移植"了棒棒糖动画.最简单的方法是使用像Igvalle的Material-Animation这样的库(参见#4).它minSdk是16,但我希望你能减少14或更低.

其他一些库:TransitionsBackport,PreLollipopTransition,无处不在的转换.

如果你创建这个动画,请告诉我!

Answer 2

这是指向如何实现它的网页链接.希望它有助于 http://blog.grafixartist.com/circular-reveal-effect-like-whatsapp-in-android/.

Answer 3

是的,我们现在可以在2.3+上使用循环显示效果

我们可以通过使用此循环显示库来实现此效果.

添加库依赖项

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

Answer 4

我试了一下,我无法使它与pre-L设备兼容,但我觉得它看起来很酷.

去看看GitHub吧