反转循环旋转动画

Question

反转循环旋转动画

6

我希望制作一个简单的动画，我会尝试描述它。首先，在屏幕中央有一个相对较小的圆圈，然后当您按下它时，圆形动画会展示一个矩形按钮。我不知道是否以最佳方式实现，但这就是它。

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

目前一切都很顺利。接下来我想做一个反向的圆形展示动画 - 基本上就是我刚刚创建的相同动画，只是反向，以便在最后，我的小圆圈和按钮会消失。

有人能给我一些提示吗？我该如何做呢？

- etrusks

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yashkal · Accepted Answer

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

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