揭露动画（RevealAnimator）的基本使用

前言

揭露动画是 Android 5.0 的新特性，使用该动画后，在显示或隐藏视图的时候能够给用户提供视觉连续型。

效果

先上最终的效果图，毕竟只有当你对动画效果感兴趣的时候，才会认真地看它的代码实现。

由于是在模拟器上运行，可能有点卡顿，在真机上效果会更好

API

在讲代码实现前，先介绍下实现揭露动画的 API：ViewAnimationUtils.createCircularReveal 方法。

Animator createCircularReveal(View view,
            int centerX,  int centerY, float startRadius, float endRadius)

它有五个参数，作用如下：

参数	说明	备注
View view	动画作用的视图
int centerX	揭露动画中心点的 x 坐标
int centerY	揭露动画中心点的 y 坐标	后面的开始（结束）半径是以该（x, y）坐标为原点开始算的
float startRadius	开始半径
float endRadius	结束半径	结束半径 > 开始半径，为显示视图。反之，为隐藏视图。

实现

活动的一些成员变量：

private ImageView mImageIv;     // 图片

private Animator mShowAnim;     // 显示视图的揭露动画
private Animator mHideAnim;     // 隐藏视图的揭露动画

显示视图

// 动画正在进行，不要重复点击
if (mShowAnim != null && mShowAnim.isRunning() ||
        mHideAnim != null && mHideAnim.isRunning()) {
    break;
} else {
    // 由于揭露动画创建后只能运行一次
    // 所以如果没有创建过动画或动画已经运行结束，就再创建一次
    initShowAnim();
}
// 先显示视图再进行动画
mImageIv.setVisibility(View.VISIBLE);
mShowAnim.start();

其中 initShowAnim 方法：

/**
 * 初始化显示视图的揭露动画
 */
private void initShowAnim() {
    int cx = mImageIv.getMeasuredWidth() / 2;   // 揭露动画中心点的 x 坐标
    int cy = mImageIv.getMeasuredHeight() / 2;  // 揭露动画中心点的 y 坐标
    float startRadius = 0f;     // 开始半径
    float endRadius = (float) Math.max(mImageIv.getWidth(), mImageIv.getHeight()) / 2;  // 结束半径
    mShowAnim = ViewAnimationUtils
            .createCircularReveal(mImageIv, cx, cy, startRadius, endRadius); // 创建揭露动画
    mShowAnim.setDuration(2 * 1000);
    mShowAnim.setInterpolator(new AccelerateDecelerateInterpolator());
}

隐藏视图

// 动画正在进行，不要重复点击
if (mHideAnim != null && mHideAnim.isRunning() ||
        mShowAnim != null && mShowAnim.isRunning()) {
    break;
} else {
    // 由于揭露动画创建后只能运行一次
    // 所以如果没有创建过动画或动画已经运行结束，就再创建一次
    initHideAnim();
}
// 先显示视图再进行动画
mImageIv.setVisibility(View.VISIBLE);
mHideAnim.start();

其中 initHideAnim 方法：

/**
 * 初始化隐藏视图的揭露动画
 */
private void initHideAnim() {
    int cx = mImageIv.getMeasuredWidth() / 2;   // 揭露动画中心点的 x 坐标
    int cy = mImageIv.getMeasuredHeight() / 2;  // 揭露动画中心点的 y 坐标
    float startRadius = (float) Math.max(mImageIv.getWidth(), mImageIv.getHeight()) / 2;   // 开始半径
    float endRadius = 0f;   // 结束半径
    mHideAnim = ViewAnimationUtils
            .createCircularReveal(mImageIv, cx, cy, startRadius, endRadius); // 创建揭露动画
    mHideAnim.setDuration(2 * 1000);
    mHideAnim.setInterpolator(new AccelerateDecelerateInterpolator());
    // 结束动画时隐藏 View
    mHideAnim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mImageIv.setVisibility(View.INVISIBLE);
        }
    });
}

参考

• （译）Android圆形揭露动画