Android - Circular Reveal 不会填满整个空间

Question

在我的 Android 应用程序中，我使用 CircularReveal 来显示以前不可见的灰色 RelativeLayout，当单击按钮时，它会占据整个屏幕。 问题是按钮被放置在右下角，并且从那里开始的动画只是平滑地显示了RelativeLayout的一小部分。其余部分在没有任何动画的情况下可见。

我的代码如下：

布局/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:fab="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <RelativeLayout android:id="@+id/cover_rl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/fab_material_blue_grey_500"
        android:alpha="0.7"
        android:elevation="2dp"
        android:layout_below="@id/tool_bar"
        android:visibility="invisible" />

    <com.software.shell.fab.ActionButton
        android:id="@+id/fab_speeddial_action1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stateListAnimator="@drawable/fab_animator"
        android:layout_gravity="center_vertical"
        android:elevation="6dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        android:layout_above="@id/fab_speeddial_action2"
        fab:type="MINI"
        fab:button_color="@color/colorAccent"
        fab:button_colorPressed="@color/fab_color_pressed"
        fab:image="@drawable/ic_done_24px"
        fab:shadow_color="#BF360C"
        fab:shadow_radius="1.0dp"
        fab:shadow_xOffset="0.5dp"
        fab:shadow_yOffset="1.0dp"
        fab:show_animation="@anim/fab_roll_from_down" />

</RelativeLayout>

MainActivity.java

    public class MainActivity extends AppCompatActivity {
        private boolean wasFABPressed;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            RelativeLayout coverRl = (RelativeLayout) findViewById(R.id.cover_rl);
            ActionButton actionButton = (ActionButton) findViewById(R.id.fab_speeddial_action1);

            actionButton.setOnClickListener(new View.OnClickListener() {
    if(wasFABPressed) {
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //El centro de la animación de revelar es el botón
            float x = actionButton.getX();
            float y = actionButton.getY();

            int cx = (int) (x + (x + actionButton.getWidth())) / 2;
            int cy = (int) (y + (y - actionButton.getHeight())) / 2;

            int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight()) / 2;

            Animator anim = ViewAnimationUtils.createCircularReveal(coverRl, cx, cy, finalRadius, 0);

            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    coverRl.setVisibility(View.INVISIBLE);
                }
            });
            anim.start();
        }
    }else{
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //El centro de la animación de revelar es el botón
            float x = actionButton.getX();
            float y = actionButton.getY();

            int cx = (int) (x + (x + actionButton.getWidth())) / 2;
            int cy = (int) (y + (y - actionButton.getHeight())) / 2;

            int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight()) / 2;

            Animator anim = ViewAnimationUtils.createCircularReveal(coverRl, cx, cy, 0, finalRadius);
            anim.setInterpolator(new AccelerateDecelerateInterpolator());
            coverRl.setVisibility(View.VISIBLE);
            anim.start();
        }
    }

    wasFABPressed = !wasFABPressed;
});

Answer 1

您正在使用：

int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight()) / 2;

这基本上是您要显示的最终视图半径的一半。因此，圆形显示将适用于视图的一半，然后视图的另一半将仅出现而没有任何动画。所以你需要使用这个：

int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight());

对于最终半径。当您从视图中心使用圆形显示时，只需将其除以 2。您也可以使用：

int finalRadius = Math.hypot(coverRl.getWidth(), coverRl.getHeight());

好像按钮在最右边的角落。 Math.hypot 返回斜边。

Answer 2

RevealAnimator Kotlin ext -

fun View.circularReveal() {
    clearAnimation()
    val cx: Int = width / 2
    val cy: Int = height / 2
    val finalRadius: Int =
        width.coerceAtLeast(height)
    val anim: Animator = ViewAnimationUtils.createCircularReveal(
        this,
        cx,
        cy,
        0f,
        finalRadius.toFloat()
    )
    anim.interpolator = AccelerateDecelerateInterpolator()
    anim.duration = 400
    isVisible = true
    anim.start()
    anim.doOnEnd {
        isVisible = false
    }
}