本篇是添加银行卡动画的最后一篇，要实现的效果如下

添加银行卡动画

首先观察动画，动画开始的时候将上一页的phoneLayout移除，然后这个电话的背景图向下+放大的效果，然后是短信验证码view(viewCode)添加到电话背景图上，里面的内容执行scale动画。

我们先来做这个电话背景图片向下+放大的效果,这次我们使用的是属性动画，所以在res下新建animator，然后新建thirdainm.xml，代码如下：

然后在activity中对动画进行监听,在动画开始时移除phoneLayout，动画结束时添加viewCode到手机屏幕上

        thirdAnim = AnimatorInflater.loadAnimator(this, R.animator.thirdanim);
        thirdAnim.addListener(new MyAnimationListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                phoneLayout.setVisibility(View.GONE);//将上一页的phoneLayout移除
            }

            @Override
            public void onAnimationEnd(Animator animation) {           //这里添viewCode到手机屏幕上，主要是计算位置
           }

viewCode代码如下：

然后在onAnimationEnd中添加viewCode

                public void onAnimationEnd(Animator animation) {
                View viewCode= AddBankCardActivity.this.getLayoutInflater().inflate(R.layout.view_addbank_code, null);
                final ImageView ivMessage = (ImageView) viewCode.findViewById(R.id.addbank_code_image);
                final TextView tvMess1 = (TextView) viewCode.findViewById(R.id.addbank_code_tv1);
                final TextView tvMess2 = (TextView) viewCode.findViewById(R.id.addbank_code_tv2);
                RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
                param.width = (int) (ivPhone.getWidth() - ivPhone.getWidth() * 0.116);
                param.height = (int) (ivPhone.getHeight() * 0.3);
                param.leftMargin = (int) (ivPhone.getLeft() + ivPhone.getWidth() * 0.058);
                param.topMargin = (int) (ivPhone.getTop() + ivPhone.getHeight() * 0.251);
                rlContent.addView(viewCode, param);//短信验证码view(viewCode)添加到电话背景图上}

其中最主要的就是计算viewCode的LayoutParams，需要根据ivphone的宽高和margin来计算出view的LayoutParams。然后就是viewCode中的imageview和两个textview依次执行scale动画，scale动画如下

activity中的依次执行动画，并在动画结束后，将view显示出来

                Animation ivAnim = AnimationUtils.loadAnimation(AddBankCardActivity.this, R.anim.scaleanim);
                final Animation tvAnim1 = AnimationUtils.loadAnimation(AddBankCardActivity.this, R.anim.scaleanim);
                final Animation tvAnim2 = AnimationUtils.loadAnimation(AddBankCardActivity.this, R.anim.scaleanim);
                ivMessage.startAnimation(ivAnim);
                ivAnim.setAnimationListener(new MyAnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        ivMessage.setVisibility(View.VISIBLE);
                        tvMess1.startAnimation(tvAnim1);
                    }
                });
                tvAnim1.setAnimationListener(new MyAnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        tvMess1.setVisibility(View.VISIBLE);
                        tvMess2.startAnimation(tvAnim2);
                    }
                });
                tvAnim2.setAnimationListener(new MyAnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        tvMess2.setVisibility(View.VISIBLE);
                    }
                });
            }
        });

好了，到此为止添加银行卡动画已经全部实现完毕，但是在实际项目中，你可能会要返回上一步修改卡号或者手机号码，这个时候你就要做返回的动画，效果正好跟咱们这个反着来，有兴趣的小伙伴可以自己动手实现一下，好了代码已经上传，欢迎star

原文链接：http://www.apkbus.com/blog-950954-77430.html