Android 在两个视图之间切换时显示圆形动画

我正在努力实现的目标

我在网格布局中有一组按钮。其中一个按钮在向上舍入和向下舍入之间切换其他按钮的功能

我正在尝试实现一个动画，它会以涟漪般的效果更改按钮的颜色。圆形显示动画是我想要的效果，新颜色从切换按钮上的触摸点扩散到其他按钮的其余部分。在这两种情况下，我只希望动画从接触点向外生长，从向上取整切换到向下取整再返回

问题

动画仅在从向上舍入到向下舍入的第一个实例中工作（我的应用程序以向上舍入作为默认值开始）。从向下取整切换回向上取整时没有动画；所有的按钮只是改变颜色和切换按钮改变图标

这是我的第一个应用程序，所以我很难找出哪里出了问题

我的方法和代码

在我的activity_main.xml布局文件中，我创建了两组GridLayout（每个都有子按钮），并通过将它们包装在FrameLayout中，将它们一个一个地分层。一套颜色与另一套不同；我也有一个不同的图标切换按钮为每一套，以区分两个舍入方法。我已将第二个GridLayout父级上的“可见性”属性设置为“不可见”

<FrameLayout

    <GridLayout
        android:id="@+id/roundUp"

        <ImageButton
            android:id="@+id/buttonU1"
            ... />
        <Button ... />
        <Button ... />
    </GridLayout>

    <GridLayout
        android:id="@+id/roundDown"
        android:visibility="invisible"

        <ImageButton
            android:id="@+id/buttonD1"
            ... />
        <Button ... />
        <Button ... />
    </GridLayout>

</FrameLayout>

忽略以下事实：当前动画的原点位于GridLayout的中心。我只想先让基础工作开始

我认为问题在于动画的逻辑和/或设置

---

我曾尝试将originX、originY和finalRadius计算移到if语句中，并使用roundUp（对于roundingMode true）和roundDown GridLayouts（对于roundingMode false），但这不起作用-因此我认为它是否不可见并不重要（在从向下舍入切换到向上舍入的场景中）.

最终理解了圆形显示动画的作用是显示最初不可见的重叠视图。因此，为了使用它前后更改视图的颜色，您必须在动画结束后将新颜色（从显示视图）应用于下方的视图，然后使用应用于它的其他颜色使显示视图再次不可见

我的原始代码试图揭示下面的视图，这当然是不可能的

我发现以下页面非常有用：

import ...

boolean roundingMode;

public class MainActivity extends AppCompatActivity {

    GridLayout roundUp, roundDown;
    ImageButton buttonU1, buttonD1;
    Button ...

    @Override;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        roundUp = (GridLayout) findViewById(R.id.roundUp);
        buttonU1 = (ImageButton) findViewById(R.id.buttonU1);

        roundDown = (GridLayout) findViewById(R.id.roundDown);
        buttonD1 = (ImageButton) findViewById(R.id.buttonD1);

        roundingMode = true;

        buttonU1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                buttonCircularRevealAnim(roundDown);
                roundingMode = false;
            }
        });

        buttonD1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                buttonCircularRevealAnim(roundUp);
                roundingMode = true;
            }
        });
    }

    public void buttonCircularRevealAnim(View view) {

        int originX = roundUp.getWidth() / 2;
        int originY = roundUp.getHeight() / 2;

        float finalRadius = (float) Math.hypot(originX,originY);

        Animator anim;

        if (roundingMode) {

            anim = ViewAnimationUtils.createCircularReveal(roundDown, originX, originY, 0, finalRadius);
            roundDown.setVisibility(View.VISIBLE);
            anim.start();

            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    roundUp.setVisibility(View.INVISIBLE);
                }
            });

        } else {

            anim = ViewAnimationUtils.createCircularReveal(roundUp, originX, originY, 0, finalRadius);
            roundUp.setVisibility(View.VISIBLE);
            anim.start();

            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    roundDown.setVisibility(View.INVISIBLE);
                }
            });
        }
    }