本系列主要是记录一下项目中添加银行卡的动画，先来看一下要实现的效果
本篇主要实现的是第一个动画，星星坠落动画，观察发现，总共16颗星星，我们让15颗星星坠落，最后保留一颗星星（TextView）来显示我们的卡号，而这16颗星星如果在xml里面写16个textview，然后在分别给其做位移动画实在比较麻烦，所以我们写一个自定义的view来处理这部分动画，我们命名为StarView，让其继承LinearLayout，代码如下：
public class StarView extends LinearLayout {
TranslateAnimation tvTranslation;//位移动画
final int[] count = new int[2];//记录子view的个数
private boolean isDone = false;//记录动画是否执行过
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (count[0] > 0) {
getChildAt(count[0]).startAnimation(tvTranslation);
}
}
};
public StarView(Context context) {
this(context, null);
}
public StarView(Context context, AttributeSet attrs) {
this(context, attrs, -1);
}
public StarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//首先是添加16个textview,然后每各4个加一个padding（银行卡显示效果）
private void init() {
for (int i = 0; i < 16; i++) {
TextView tv = new TextView(getContext());
tv.setTextColor(getResources().getColor(R.color.white));
if (i % 4 == 0)
tv.setPadding(10, 0, 0, 0);
tv.setText("*");
tv.setTextSize(20);
addView(tv);
}
}
//星星坠落的动画
public void startAnim() {
if (isDone) return;//执行过不在执行
isDone = true;
count[0] = getChildCount();
final Timer time = new Timer();
TimerTask task = new TimerTask() {
@Override
public void run() {
tvTranslation = new TranslateAnimation(0, 0, 0, 500);
tvTranslation.setDuration(500);
tvTranslation.setFillAfter(true);
count[0]--;
handler.sendEmptyMessage(0);
}
};
time.schedule(task, 0, 50);//添加定时器，间隔50毫秒对textview执行坠落动画，
}
public void setText(String s) {
((TextView) getChildAt(0)).setText(s);
}//用第一个textview显示卡号
}代码很少，也比较简单，初始化的时候添加16个textview，内容为*，然后每隔4个加一个padding，这样看起来像银行卡的格式，然后写一个开启动画的方法，主要是用一个定时器，依次对后面的15个textview执行位移动画，好了这个时候我们添加activity进行调用。首先我们自定义了一个BandCardEditText(https://github.com/smuyyh/BankCardFormat)
继承EditText，主要是让其能按照银行卡格式显示输入效果，代码如下：
public class BandCardEditText extends EditText {
private boolean shouldStopChange = false;
private final String WHITE_SPACE = " ";
private BandCardEditTextListen listener;
public BandCardEditText(Context context) {
this(context, null);
}
public BandCardEditText(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BandCardEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
format(getText());
shouldStopChange = false;
setFocusable(true);
setEnabled(true);
setFocusableInTouchMode(true);
addTextChangedListener(new CardTextWatcher());
}
class CardTextWatcher implements TextWatcher {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
if(listener!=null)listener.beforeTextChanged(s,start,count,after);
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable editable) {
format(editable);
if(listener!=null)listener.afterTextChanged(editable);
}
}
private void format(Editable editable) {
if (shouldStopChange) {
shouldStopChange = false;
return;
}
shouldStopChange = true;
String str = editable.toString().trim().replaceAll(WHITE_SPACE, "");
int len = str.length();
int courPos;
StringBuilder builder = new StringBuilder();
for (int i = 0; i < len; i++) {
builder.append(str.charAt(i));
if (i == 3 || i == 7 || i == 11 || i == 15) {
if (i != len - 1)
builder.append(WHITE_SPACE);
}
}
courPos = builder.length();
setText(builder.toString());
setSelection(courPos);
}
public String getBankCardText() {
return getText().toString().trim().replaceAll(" ", "");
}
public interface BandCardEditTextListen{
void beforeTextChanged(CharSequence s, int start, int count, int after);
void afterTextChanged(Editable editable);
}
public void setListener(BandCardEditTextListen listener) {
this.listener = listener;
}
}然后我们在activity中对这个EditText设置Listener，代码如下
etInput.setListener(new BandCardEditText.BandCardEditTextListen() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
starView.startAnim();//开始输入卡号的时候，执行星星坠落动画
}
@Override
public void afterTextChanged(Editable editable) {
starView.setText(etInput.getText().toString());//将EditText的内容显示到第一个星星（TextView）上
}
});好了，到此这个星星坠落的动画已经实现，其余动画我们会在接下来慢慢实现。
下面实现第一次点击下一步时的动画，效果如下
观察这个动画，大致可以分为第一页的向上+向下位移动画，第一页动画结束的时候将第一页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属性来适配，代码已经上传
下面实现第一次点击下一步时的动画，效果如下
观察这个动画，大致可以分为第一页的向上+向下位移动画，第一页动画结束的时候将第一页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
扫一扫
1734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
