揭露动画(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);
            }
        });
    }

参考

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值