0

我想要达到的目标

我在 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），但这不起作用 - 所以我认为它是否无关紧要是不可见的（在您从向下舍入切换到向上舍入的情况下）。

4

1 回答 1

1

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

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

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

于 2017-05-21T03:17:40.003 回答