反转圆形狂欢动画

Question

我想做一个简单的动画，我会尝试描述。在第一个屏幕中间有一个小圆圈，然后当你按下它时，圆形动画会显示一个矩形按钮。我不知道我是否以最好的方式做到了，但就是这样

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/circle_color"></solid>

    <size
        android:width="50dp"
        android:height="50dp"/>
</shape>

我的片段布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragments_container">

    <Button
        android:id="@+id/my_button"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@color/buttons_color"
        android:visibility="invisible"
        />

    <ImageView
        android:id="@+id/circle_image"
        android:layout_gravity="center"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/circle" />

</FrameLayout>

然后在我的片段中

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    activity = (MainActivity) getActivity();
    final View fragments_container = activity.findViewById(R.id.fragments_container);

    final Button button = (Button) activity.findViewById(R.id.my_button);
    final ImageView image = (ImageView) activity.findViewById(R.id.circle_image);



    image.setOnClickListener(new ImageView.OnClickListener(){
        @Override
        public void onClick(View v) {
            Animator animator = ViewAnimationUtils.createCircularReveal(fragments_container,
                    image.getLeft() + image.getWidth() / 2,
                    image.getTop() + image.getHeight() / 2,
                    0,
                    button.getWidth());

            image.setVisibility(View.INVISIBLE);
            button.setVisibility(View.VISIBLE);
            animator.start();
        }
    });
}

到目前为止一切正常。接下来我想做反转的圆形显示动画 - 基本上是我刚刚创建的相同动画只是反转了，所以最后我的小圆圈和按钮会消失。

谁能给我一些提示我该怎么做？

Answer 1

我尝试了一些方法来解决您的问题，希望对您有所帮助。

image.setOnClickListener(new ImageView.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    revealShow(button, true);
                }
            }
        });

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    revealShow(image, false);
                }
            }
        });

//这里是revealShow方法，你可以根据需要改变动画时长。

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void revealShow(View view, boolean isExpand) {

        int w = view.getWidth();
        int h = view.getHeight();

        int endRadius = (int) Math.hypot(w, h);

        int cx = (int) (image.getX() + (image.getWidth() / 2));
        int cy = (int) (image.getY() + (image.getHeight() / 2));


        if (isExpand) {
            Animator revealAnimator = ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, 0, endRadius);

            image.setVisibility(View.INVISIBLE);
            button.setVisibility(View.VISIBLE);
            revealAnimator.setDuration(500);
            revealAnimator.start();

        } else {

            Animator anim =
                    ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, endRadius, image.getWidth() / 2);

            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    image.setVisibility(View.VISIBLE);
                    button.setVisibility(View.INVISIBLE);
                }
            });
            anim.setDuration(500);
            anim.start();
        }
    }