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

Для финала Radius. Когда вы используете круговое раскрытие от центра вида, тогда вам нужно только разделить его на 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
    }
}