本篇是添加銀行卡動畫的最后一篇，要實現(xiàn)的效果如下

添加銀行卡動畫

首先觀察動畫，動畫開始的時候?qū)⑸弦豁摰膒honeLayout移除，然后這個電話的背景圖向下+放大的效果，然后是短信驗證碼view(viewCode)添加到電話背景圖上，里面的內(nèi)容執(zhí)行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中對動畫進行監(jiān)聽,在動畫開始時移除phoneLayout，動畫結(jié)束時添加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，需要根據(jù)ivphone的寬高和margin來計算出view的LayoutParams。然后就是viewCode中的imageview和兩個textview依次執(zhí)行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中的依次執(zhí)行動畫，并在動畫結(jié)束后，將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);
                    }
                });
            }
        });

好了，到此為止添加銀行卡動畫已經(jīng)全部實現(xiàn)完畢，但是在實際項目中，你可能會要返回上一步修改卡號或者手機號碼，這個時候你就要做返回的動畫，效果正好跟咱們這個反著來，有興趣的小伙伴可以自己動手實現(xiàn)一下，好了代碼已經(jīng)上傳，歡迎star
github：https://github.com/MrAllRight/BezierView