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

---

本篇接着上一篇实现第一次点击下一步时的动画，效果如下

添加银行卡动画

观察这个动画，大致可以分为第一页的向上+向下位移动画，第一页动画结束的时候将第一页view从layout中remove掉，然后添加第二页的view到layout中，并执行向上位移动画，动画结束的时候，添加phoneview到第二页view中并执行动画

我们首先来实现第一个动画，新建firstanim.xml，如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true">
    //向上的动画
    <translate
        android:duration="100"
        android:fromYDelta="0%p"
        android:toYDelta="-5%p" />
    //向下的动画在要100ms后执行
    <translate
        android:startOffset="100"
        android:duration="500"
        android:fromYDelta="0%p"
        android:toYDelta="105%p"/>
</set>

在activity中初始化anim，并添加监听器

 //第一步next动画,结束的时候添加bankCardView2(第二页)到rlContent,然后第二页执行向上的动画
        firstAnim = AnimationUtils.loadAnimation(this, R.anim.firstanim);
        firstAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                rlContent.removeView(bankCardView1);
                rlContent.addView(bankCardView2);
                rlContent.startAnimation(phoneInAnim);//第二页动画
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

第二页动画的代码如下（secondanim.xml）

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="100%p"
    android:toYDelta="0%p"
    />

第二页动画结束后，我们要添加“您的手机号码”几个字到界面中，并执行动画，观察这个动画实际上跟我们上篇文章中实现的starview是一样的，也是几个textview实现位移动画，我们模仿上次starview的实现步骤，新建phoneview类，代码如下(说明一下，本篇只是实现没做机型适配)

public class PhoneView extends LinearLayout {
    private int index=0;
    private String[] texts = {"您", "的", "手", "机", "号","码"};
    TranslateAnimation tvTranslation;//位移动画
    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(index<texts.length)
            getChildAt(index++).startAnimation(tvTranslation);

        }
    };

    public PhoneView(Context context) {
        this(context, null);
    }

    public PhoneView(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public PhoneView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        ViewGroup.LayoutParams params=new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, UiUtils.dp2px(getContext(),100));
        for (int i = 0; i < texts.length; i++) {
            TextView tv = new TextView(getContext());
            tv.setTextColor(getResources().getColor(R.color.phoneTextBlue));
            tv.setText(texts[i]);
            tv.setTextSize(16);
            tv.setLayoutParams(params);
            tv.setGravity(Gravity.BOTTOM);
            tv.setPadding(0,0,0,UiUtils.dp2px(getContext(),30));
            addView(tv);
        }

    }

    public void startAnim() {
        final Timer time = new Timer();
        TimerTask task = new TimerTask() {
            @Override
            public void run() {
                tvTranslation = new TranslateAnimation(0, 0, 0, -100);
                tvTranslation.setDuration(300);
                tvTranslation.setFillAfter(true);
                handler.sendEmptyMessage(0);
            }
        };
        time.schedule(task, 0, 50);//添加定时器，间隔50毫秒对textview执行动画，
    }

}

然后我们在第二页动画结束中，把phoneview添加到页面中，并调用startAnim方法，代码如下：

secondAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                phoneLayout.addView(phoneView);//把phoneview添加到页面中，并调用startAnim方法
                phoneView.startAnim();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

到此我们就把第一次点击下一步时的动画做完了，说明一下，其中我们对BandCardEditText进行了更改，使其不仅能适配银行卡格式，也能适配电话格式，具体是通过添加bankCardType属性来适配，代码已经上传
github：https://github.com/MrAllRight/BezierView