Android CircularReveal动画

最新推荐文章于 2024-08-13 08:16:42 发布

hi_0123

最新推荐文章于 2024-08-13 08:16:42 发布

阅读量440

点赞数

分类专栏： Android开发 Android开发之动画

本文链接：https://blog.csdn.net/kuangxiaoguo0123/article/details/79247181

版权

Android开发同时被 2 个专栏收录

32 篇文章

订阅专栏

Android开发之动画

12 篇文章

订阅专栏

本文介绍了Android中的CircularReveal动画，这是一种在API 21中引入的类似涟漪效果的动画。通过ViewAnimationUtils的createCircularReveal方法实现，详细讲解了动画的原理、XML配置、如何修改圆心坐标以及实现代码，提供了源码链接供读者深入研究。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

而我已经分不清
你是友情
还是错过的爱情

简介

CircularReveal是Google在Api版本21实现的一种动画，视觉效果类似于涟漪，主要实现api是通过ViewAnimationUtils的createCircularReveal方法。

效果图

这里写图片描述

方法

/**
     * @param view        动画view
     * @param centerX     扩展圆的圆心x坐标
     * @param centerY     扩展圆的圆心y坐标
     * @param startRadius 开始半径
     * @param endRadius   结束半径
     */
    public static Animator createCircularReveal(View view,
                                                int centerX, int centerY, float startRadius, float endRadius) {
        return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
    }

原理图

这里写图片描述

xml文件

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:onClick="doAnimation"
        android:text="开始动画" />

    <View
        android:id="@+id/animation_view"
        android:layout_width="240dp"
        android:layout_height="160dp"
        android:layout_centerInParent="true"
        android:background="#f00" />

实现

public class MainActivity extends AppCompatActivity {

    View mAnimationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAnimationView = findViewById(R.id.animation_view);
    }

    public void doAnimation(View view) {
        //动画最低支持Api21
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            return;
        }
        int width = mAnimationView.getWidth();
        int height = mAnimationView.getHeight();
        int centerX = width / 2;
        int centerY = height / 2;
        int radius = Math.max(width, height);
        if (mAnimationView.isShown()) {
            //消失动画
            Animator dismissAnimation = ViewAnimationUtils
                    .createCircularReveal(mAnimationView, centerX, centerY, radius, 0);
            dismissAnimation.setDuration(1000);
            dismissAnimation.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mAnimationView.setVisibility(View.INVISIBLE);
                }
            });
            dismissAnimation.start();
        } else {
            //显示动画
            Animator showAnimation = ViewAnimationUtils
                    .createCircularReveal(mAnimationView, centerX, centerY, 0, radius);
            showAnimation.setDuration(1000);
            mAnimationView.setVisibility(View.VISIBLE);
            showAnimation.start();
        }
    }

}

修改圆心

通过改变扩展圆的圆心坐标和半径，我们可以实现不同的扩散效果。
这里写图片描述

分析

上面这种效果我们扩展圆的圆心为(width, 0),扩展半径为对角线的长度。
这里写图片描述

实现

很简单，我们只需要把圆心坐标和半径处理下就OK了。

public void doAnimation(View view) {
        //动画最低支持Api21
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            return;
        }
        int width = mAnimationView.getWidth();
        int height = mAnimationView.getHeight();
        //指定圆心位于view右上角
        int centerX = width;
        int centerY = 0;
        //半径为对角线长度
        int radius = (int) Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
        if (mAnimationView.isShown()) {
            //消失动画
            Animator dismissAnimation = ViewAnimationUtils
                    .createCircularReveal(mAnimationView, centerX, centerY, radius, 0);
            dismissAnimation.setDuration(1000);
            dismissAnimation.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mAnimationView.setVisibility(View.INVISIBLE);
                }
            });
            dismissAnimation.start();
        } else {
            //显示动画
            Animator showAnimation = ViewAnimationUtils
                    .createCircularReveal(mAnimationView, centerX, centerY, 0, radius);
            showAnimation.setDuration(1000);
            mAnimationView.setVisibility(View.VISIBLE);
            showAnimation.start();
        }
    }