动画入门（登陆动画）

  最近项目不急，所以有时间来把最近学习的内容总结一下，并将知识做个全方面的总结，有助于自己在工作中更加深入的体会知识内容，今天就把学习的一个简单的登陆动画效果做个简单的实现，做成了一个gif图的形式，由于gif图有大小限制，所以只能看这么模糊的图片了。。。。

                                                            

 1.在这里我对这个登陆界面动画做个简单的描述，这里是将一个小球从顶部向下移动到底部，并且伴随着小球大小的变化，所以在下降的过程中伴随着平移、缩放两种动画。

//第一部分的动画效果展示

//平移动画
        ObjectAnimator animator = ObjectAnimator.ofFloat(ivBall, "translationY", 0, 1200);
//设置动画时间
        animator.setDuration(2500);
        animator.setInterpolator(new AnticipateOvershootInterpolator());
        //放大动画
        ObjectAnimator scale = ObjectAnimator.ofFloat(ivBall, "scaleX", 0.5f, 1.5f);
        scale.setDuration(2500);
//放大y轴的大小
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(ivBall, "scaleY", 0.5f, 1.5f);
        scaleY.setDuration(2500);

   注意部分：这里的我是利用属性动画实现的效果，顺便说下属性动画和视图动画的区别：简单的可以理解为属性动画改变的是控件的属性值，即如果你移动控件，那么控件的位置也发生了改变；视图动画则是对于视觉上发生了位置的偏移，并没有造成属性的改变，可以理解为控件视觉效果的移动。

2.接下来是要展示一个上下跳动的动画效果，这里要设置的是一个循环三次执行的动画，并且伴随着动画的进行，小球要变成你需要的图标，这里主要是监听动画的执行过程，在执行中途替换图片资源。

//第二部分的动画效果展示

//上下跳动三次的动画
ObjectAnimator txAnimation = ObjectAnimator.ofFloat(ivBall, "translationY", 1200, 1000);
//设置时常为1秒钟
        txAnimation.setDuration(1000);
//设置在倒叙播放一遍
        txAnimation.setRepeatMode(ValueAnimator.REVERSE);
//设置重复三次
        txAnimation.setRepeatCount(3);


//设置在动画执行中小球变为图标
//小球循环动画的回应
        txAnimation.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //动画开始执行调用
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //图标变大，并且显示输入框，动画结束调用
                openWrite();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                //动画取消调用
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                count++;
                if (count == 2) {   //第二次的时候将小球变成图标
                    ivBall.setImageResource(R.drawable.daheng);
                }
            }
        });

注意：这里我们调用了一个方法去监听动画执行的过程，当执行到第二次的时候我们去设置小球的图片内容，具体的方法的作用我已经标注在代码中了。

3.然后是一个向上的并且图标变大的动画效果，这个向上的动画和1是差不多的方法，只是反过来执行而已，接下来就是登陆布局的显示，在图标上升的过程中，延迟加载登陆界面的动画，做到一个差异性展示。

//第三部分代码展示

 //将图标放大到1.5倍
        ObjectAnimator scaleDh = ObjectAnimator.ofFloat(ivBall, "scaleY", 1.5f, 3f);
        scaleDh.setDuration(2000);
        ObjectAnimator scaled = ObjectAnimator.ofFloat(ivBall, "scaleX", 1.5f, 3f);
        scaled.setDuration(2000);
//设置移动的距离
        ObjectAnimator animatorBall = ObjectAnimator.ofFloat(ivBall, "translationY", 1200, 0);
        animatorBall.setDuration(2000);

        //设置对话框打开的顺序
        ObjectAnimator llAnimation = ObjectAnimator.ofFloat(llUserInfo, "scaleX", 0, 1);
        llAnimation.setStartDelay(1500);
        //延迟0.5s加载登录框信息
        llAnimation.setDuration(500);

        //y轴移动距离
        ObjectAnimator llAnimationY = ObjectAnimator.ofFloat(llUserInfo, "scaleY", 0, 1);
        llAnimationY.setStartDelay(1500);
        //延迟0.5s加载登录框信息
        llAnimationY.setDuration(500);
//设置登录框显示
llAnimation.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                if (llUserInfo.getVisibility() == View.GONE) {
                    llUserInfo.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

//注意事项：这里的步骤和1基本相似，但是我们在显示登录框的时候做了调整，当图标移动0.5s之后，我们再将登录框显示，并去做放大动画（0.5——>1）,这样来形成一个差异感，同时监听登录框开始时的动画，来显示登录框。

4.当图标上升完成的时候，我们需要将图标向左平移，然后显示登陆的标题信息。

//将图标左移，并显示内容
        ObjectAnimator leftAnimator = ObjectAnimator.ofFloat(ivBall, "translationX", 0, -300);
//延迟两秒，让上述动画执行完成
        leftAnimator.setStartDelay(2000);
        leftAnimator.setDuration(500);

//最后一步没什么难度，就是将图标移动到左侧，并在动画前显示标题内容。

总结：这里我主要用的时属性动画去做的效果，当然视图动画同样可以作出相同的效果。最后我要说的一点是如何将这些单独的动画组合起来：

//设置向下的动画
        AnimatorSet set = new AnimatorSet();
        AnimatorSet.Builder builder = set.play(animator);
        builder.with(A).with(B).before(C).after(D);
        set.start();

这里我做了一个简单的set，在上述的代码中执行顺序为D到AB（同时执行）到C，当上一个动画未执行时，或者未执行完成时，下一个动画是无法执行的，通过builder和set我们就可以将动画绑定起来了，完成最终想要实现的动画效果了。

具体代码我就不展示了，毕竟还在学习中，只是做个简单的整理笔记，如果想要代码的可以联系我：微信：a18756901908,欢迎共同进步。