Question

我想要实现的目标

我在GridLayout中有一组按钮。其中一个按钮在四舍五入和四舍五入之间切换其他按钮的功能。

我正在尝试实现一个动画，它会改变按钮的颜色，如同效果一样。圆形显示动画是我想要的效果，其中新颜色从切换按钮上的触摸点扩展到其他按钮的其余部分。在这两种情况下，我只希望动画从触摸点向外增长，从向上舍入到向下舍入和向后舍入。

问题

动画仅在第一个实例中从四舍五入到四舍五入（我的应用程序以四舍五入为默认值开始）。从四舍五入切换回四舍五入时没有动画;所有按钮的颜色都会改变，切换按钮会改变图标。

这是我的第一个应用程序，所以我很难找到出错的地方。

我的方法和代码

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

<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）但是这不起作用 - 所以我认为它没有重要的是它是不可见的（在你从舍入到舍入的场景中）。

Answer 1

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

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

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

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

1 个答案: