简单使用Animator打造一个平滑的转场特效(开源)

                                                

项目已开源 https://github.com/Nixo0427/AndroidAnimatorDemo

下面就进入正文了，为什么要做这么一个动画呢，当然是为了让用户更舒服的享受APP(装逼)咯,再说说用处吧，比如说RecyclerView的Item点击后，可以使用这个转场动画来过渡，达到更佳的效果，说到这里是不是有点小心动呢，那么到底是怎么实现的呢，其实不难，这里就只用一个Animator类就可以了！

1.在正式开始之前，我们需要了解一下View的位置坐标和父容器的关系。(如果你很熟悉了 可以直接看2的内容)

View.getX()  -> 获取父容器宽度

View.getY()  -> 获取父容器高度

View.getTop() -> 获取View左上角到父容器顶部的距离

View.getBottom() -> 获取View右下角到父容器顶部的距离

View.getLeft() -> 获取View左上角到父容器左部的距离

View.getRight() -> 获取View右下角到父容器的左部的距离

View.getWidth() -> 获取View的宽度

View.getHeight() -> 获取View的高度

如果上面的你还没理解，没关系接下来一张图就会让你恍然大悟！

大概关系就是如上图所示，这里的View指的是我们手机中心的ImageView。

2.使用Animator来开始我们的动画

    我们可以在看一下开头的Gif ， 我们分析一下，当图片上去的时候，它总共做了2件事 第一件事就是讲图片用圆缩小到一定程度，第二件事就是将图片平移到上方 之后放大图片， 放大的比例正是我们第1节中所用到的 父容器的X除以View的宽度 ！

    那么回去呢？  回去我们跟上去是一样的，也是先缩小同样的比例，然后再下移，再放大。下面我们就一步一步的用代码来实现我们的逻辑。

2,1 上去的代码，这里简单的吧上去称为GO

 首先，我们需要用圆形特效将Image变为一个圆  使用到的是ViewAnimatorUtils.createCircularReval()方法

int w  = imageView.getWidth(); // 获取View宽度
int h = imageView.getHeight(); //获取View高度
int x = w/2;  //圆心横坐标
int y = h/2;  //圆的纵坐标
int sr = (int) Math.sqrt((w*w)+(h*h)); //圆的半径（这里使用勾股定理）Math.sqrt为开平方

Animator go = ViewAnimationUtils.createCircularReveal(imageView,x,y,sr,30); //最小的半径是30 这样会有一个弹出的效果
go.setDuration(500); //设置一下这个动画的时长
go.start(); //开始动画

写到这里，点击ImageView我们就会看到圆会缩小到一个半径为30的圆，然后复原， 接下来我们就要在go这个动画结束的时候做一些动作(往上移动 + 放大)

我们为go设置一个监听器，当go执行结束的时候，我们做接下来的动画！

go.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        imageView.animate().translationY( - imageView.getTop()).start(); //往上平移 注意往上是负数
        int w  = imageView.getWidth(); // 这部分跟上面一样，都是一个圆的特效 不同的是，这里是从30变为半径大小
        int h = imageView.getHeight();
        int x = w/2;
        int y = h/2;
        int sr = (int) Math.sqrt((w*w)+(h*h));
        float scaleX =(imageView.getWidth() / imageView.getX() ); //计算我们放大的大小，这里是用View宽度度/父控件宽度 得到放大比例
        AnimatorSet set1 = new AnimatorSet();
        set1.playTogether(ViewAnimationUtils.createCircularReveal(imageView,x,y,30,sr)
                ,ObjectAnimator.ofFloat(imageView,"scaleX",0.0f,scaleX) //X方向放大
                ,ObjectAnimator.ofFloat(imageView,"scaleY",0.0f,scaleX) //Y方向放大
        );
        set1.setDuration(500); //同样设为500ms的动画时长
        set1.start(); //开启动画
        isGo = true; //isGo是一个boolean的值，用来表达表达go动画是否执行到在上方，如果在上方就设置为true
    }
});

这时，我们向上的go动画就写完了，是不是很简单呢。 然后我们就要去写返回的动画了

2.2 向下返回的动画，这里简称为back

back的动画我们要做的第一步也是用圆形特效 将圆变为30然后返回，跟之前一样也是那么写

int w  = imageView.getWidth();
int h = imageView.getHeight();
int x = w/2;
int y = h/2;
int sr = (int) Math.sqrt((w*w)+(h*h));
Animator back = ViewAnimationUtils.createCircularReveal(imageView,x,y,sr,30);
back.setDuration(500);
back.start();

然后我们向下移动，跟go有些不同的是，我们这会移动的距离不再是go那样了

back.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        imageView.animate().translationY(  imageView.getY() / 2).start(); //向下移动，我们移动到中心 就是父控件的一半距离了。
        int w  = imageView.getWidth();
        int h = imageView.getHeight();
        int x = w/2;
        int y = h/2;
        int sr = (int) Math.sqrt((w*w)+(h*h));
        int er = 30;

        float scaleX =( imageView.getX()/ imageView.getWidth() );


        AnimatorSet set1 = new AnimatorSet();
        set1.playTogether(ViewAnimationUtils.createCircularReveal(imageView,x,y,0,sr)
                ,ObjectAnimator.ofFloat(imageView,"scaleX",0.0f,scaleX)
                ,ObjectAnimator.ofFloat(imageView,"scaleY",0.0f,scaleX)
        );
        set1.setDuration(500);
        set1.start();
        isGo = false;
    }

然后我们在onClick里做判断，判断它在上在下。

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(isGo){
            back();
        }else{
            go();
        }
    }
});

---------------------------------------------------------------------------------------------------------------------------

这样我们的一个平滑转场效果就写完了，希望大家可以通过这个小demo来举一反三，比如说用在更多的地方，例如 一个CardView显示用户，点击后通过转场动画达到个人主页等 都是不错的效果。

欢迎留言，说出您的意见，谢谢您用宝贵的时间来看我的博客。