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

Question

我想要实现的目标

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

我正在尝试实现一个动画，该动画以波纹状效果更改按钮的颜色。圆形显示动画是我想要的效果，新颜色从切换按钮上的触摸点传播到其他按钮的其余部分。在这两种情况下，我只希望动画从触摸点向外生长，从向上舍入切换到向下舍入和向后舍入。

问题

动画仅在从四舍五入到四舍五入的第一个实例中有效（我的应用程序默认以四舍五入开始）。从向下舍入切换回向上舍入时没有动画；所有按钮的颜色都发生了变化，切换按钮的图标也发生了变化。

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

我的方法和代码

在我的 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>

在我的 MainActivity.java 文件中：

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

忽略我目前的动画原点在 GridLayout 的中心这一事实。我只想先了解基础知识。

我觉得问题出在逻辑上and/or动画的设置？

我试过将 originX、originY 和 finalRadius 计算移动到 if 语句中并使用 roundUp（对于 roundingMode true）和 roundDown GridLayouts（对于 roundingMode false），但这没有用 - 所以我认为它不起作用它是否不可见并不重要（在您从向下舍入切换到向上舍入的情况下）。

Answer 1

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

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

我发现以下页面非常有用： http://myhexaville.com/2016/12/19/keep-your-app-material/

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

Circular reveal animation when switching between two views

animation

android

circularreveal