ViewAnimationUtils实现揭露动画

蜻蜓队长

发布于 2018-08-03 10:23:58

2780

发布于 2018-08-03 10:23:58

随着material design设计规范的普及，material design中的动画将为用户提供操作反馈并在用户与您的应用进行互动时提供视觉连续性。 material design将为按钮与操作行为转换提供一些默认动画，而 Android 5.0（API 级别 21）及更高版本可让您定制这些动画，同时也可创建新动画。今天我们就来了解一下循环揭露这一效果，以及它的一些扩展的使用。

先认识

我们先看下效果：

以上效果就是通过ViewAnimationUtils实现的，利用简单的几行代码，实现酷炫的揭露动画。

Api

目前ViewAnimationUtils类中只有一个方法，那就是createCircularReveal。很明显，我们使用ViewAnimationUtils.createCircularReveal()方法就能达到基本的揭露动画效果了。那么我们就直接开始看一下这个方法到底需要哪些参数吧：

view：代表的是你要操作的view
centerX：圆的x方向的中点
centerY：圆的y方向的中点
startRadius：这个圆开始时候的半径
endRadius：结束时候的半径

斜线展示

Animator animator1 = ViewAnimationUtils.createCircularReveal(cv_img, 0, 0, 0, (float) Math.hypot(cv_img.getWidth(), cv_img.getHeight()));
animator1.setInterpolator(new LinearInterpolator());//插补器有没有不影响
animator1.setDuration(2000);
animator1.start();

由内向外揭露

int cenX = cv_img.getWidth() / 2;
int cenY = cv_img.getHeight() / 2;
Animator an = ViewAnimationUtils.createCircularReveal(cv_img, cenX, cenY, 0, cenX);
an.setDuration(3000);
an.start();
an.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        cv_img.setVisibility(View.VISIBLE);
    }
});

由外向内揭露

int centerX = cv_img.getWidth() / 2;//获取组件的宽的一半
int centerY = cv_img.getHeight() / 2;//获取组件的高的一半
Animator animator = ViewAnimationUtils.createCircularReveal(cv_img, centerX, centerY,cv_img.getWidth(), 0);
animator.setDuration(3000);
animator.setInterpolator(new LinearOutSlowInInterpolator());//out到in
animator.start();
animator.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        cv_img.setVisibility(View.GONE);
    }
});

至于是何种形态变化，具体还是有createCircularReveal的后四个参数决定，这几个参数都解释过了，也很好理解，这里就不再累赘了。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-07-10，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自 Android机动车微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度