本篇是添加银行卡动画的最后一篇，要实现的效果如下
添加银行卡动画
首先观察动画，动画开始的时候将上一页的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
