自定义View之添加银行卡动画（三）

---

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

添加银行卡动画

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

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

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together"
    >

    <objectAnimator
        android:propertyName="translationY"
        android:duration="500"
        android:valueFrom="0"
        android:valueTo="150"
        />
    <objectAnimator
        android:propertyName="scaleX"
        android:duration="500"
        android:valueFrom="1.0"
        android:valueTo="1.2"
        />
    <objectAnimator
        android:propertyName="scaleY"
        android:duration="500"
        android:valueFrom="1.0"
        android:valueTo="1.2"
        />
</set>

然后在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代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    >
<RelativeLayout
    android:id="@+id/rl_addbank_code"
    android:padding="5dp"
    android:background="@color/colorBule3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:visibility="invisible"
        android:id="@+id/addbank_code_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_xiaoxi" />

    <TextView
        android:visibility="invisible"
        android:textColor="@color/white"
        android:textSize="10sp"
        android:text="新的短消息"
        android:id="@+id/addbank_code_tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/addbank_code_image" />

    <TextView
        android:visibility="invisible"
        android:textColor="@color/white"
        android:textSize="10sp"
        android:layout_marginTop="3dp"
        android:layout_marginLeft="5dp"
        android:layout_below="@+id/addbank_code_tv1"
        android:layout_toRightOf="@+id/addbank_code_image"
        android:text="您收到的验证码xxxxxx"
        android:id="@+id/addbank_code_tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>

然后在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动画如下

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fillAfter="true"
        android:duration="200"
        android:fromXScale="0"
        android:fromYScale="0"
        android:toXScale="1"
        android:toYScale="1" />
</set>

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
github：https://github.com/MrAllRight/BezierView