ITPub博客

首页 > IT职业 > IT生活 > 自定义View之添加银行卡动画(二)

自定义View之添加银行卡动画(二)

IT生活 作者:ghost_hand 时间:2021-09-09 09:46:04 0 删除 编辑

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

图片描述

添加银行卡动画

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

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


    //向上的动画
    
    //向下的动画在要100ms后执行
    

在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)

第二页动画结束后,我们要添加“您的手机号码”几个字到界面中,并执行动画,观察这个动画实际上跟我们上篇文章中实现的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

然后我们在第二页动画结束中,把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

http://www.apkbus.com/blog-950954-77429.html


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1059/viewspace-2811961/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: Invalid Configuration
请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    81
  • 访问量
    444