在两个视图之间切换时循环显示动画答案

【问题标题】：Circular reveal animation when switching between two views在两个视图之间切换时循环显示动画
【发布时间】：2017-05-14 08:57:11
【问题描述】：

我正在努力实现的目标

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

我正在尝试实现一个动画，该动画会以类似波纹的效果改变按钮的颜色。圆形显示动画是我想要的效果，其中新颜色从切换按钮上的触摸点传播到其他按钮的其余部分。在这两种情况下，我只希望动画从触摸点向外扩展，从向上舍入切换到向下舍入并返回。

问题

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

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

我的方法和代码

在我的 activity_main.xml 布局文件中，我创建了两组 GridLayouts（每组都有子按钮），并通过将它们都包装在 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 的中心拥有动画原点的事实。我只想让基础知识先发挥作用。

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

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

【问题讨论】：

标签： android animation circularreveal

【解决方案1】：

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

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

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

【讨论】：