实现Gmail邮箱翻转效果之翻转动画

文章列表

以下文章是github文章的分解，力求讲清楚类gMail效果如何实现。

实现Gmail邮箱翻转效果之开篇

实现Gmail邮箱翻转效果之翻转动画

实现Gmail邮箱翻转效果之ActionBar

本文是其中的第二篇： 翻转动画。完整的代码查github

类gmail动画翻转

仔细查看gmail翻转动画，发现选中和取消的动画不一样，要达到跟gmail同样的效果，使用了2个scale动画。

但是在实际测试过程中，发现达不到gmail那么好的效果。还是水平有限啊。

说到Android 动画，又是一个大坑，幸好有些人已经帮我们填了不少土，不至于陷得深。

可以参考：Android Animations动画使用详解 其中的scale说明，是本Demo使用到的动画。

如果想了解如何实现曲线运动的属性动画，那就参考之前blog： 实现自定义对话框中的属性动画

动画文件

flip_anim_from_middle.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromXScale="0.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />

flip_anim_to_middle.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="0.0"
android:pivotX="50%"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotY="50%"
android:duration="150" />

上述2个动画文件都是scale动画(渐变尺寸伸缩动画效果)

使用x，y 4种属性:

fromXScale 属性 为动画起始时 X坐标上的伸缩尺寸
toXScale   属性 为动画结束时 X坐标上的伸缩尺寸

fromYScale 属性 为动画起始时Y坐标上的伸缩尺寸
toYScale   属性 为动画结束时Y坐标上的伸缩尺寸

0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大

pivotX    属性 为动画相对于物件的X坐标的开始位置
pivotY    属性 为动画相对于物件的Y坐标的开始位置

以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置

长整型值：
duration  属性 为动画持续时间
说明:   时间以毫秒为单位

关键代码

初始化SampleAdapter时需要添加
flipAnim1 = AnimationUtils.loadAnimation(mContext, R.anim.flip_anim_to_middle);
flipAnim2 = AnimationUtils.loadAnimation(mContext, R.anim.flip_anim_from_middle);

在getview中onClickListener中需要添加

//start animation
mFlipView = (ImageView) v;
mFlipView.clearAnimation();
mFlipView.setAnimation(flipAnim1);
mFlipView.startAnimation(flipAnim1);

try {
Log.e(TAG, "\n v.getTag = " + (Integer.parseInt(v.getTag().toString())));
setAnimListners(holder, mDataList.get(Integer.parseInt(v.getTag().toString())));
}catch (NullPointerException exp){
Log.e(TAG, exp.getMessage());
}

private void setAnimListners(final ViewHolder holder, final ListData curListData) {
Animation.AnimationListener animListner;
animListner = new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
Log.e(TAG, "\n  onAnimationStart = " + animation);

if (animation == flipAnim1) {
Log.e(TAG, "curListData.isChecked = " + curListData.isChecked);

if (curListData.isChecked) {
//mFlipView.setImageResource(R.drawable.cb_unchecked);
TextDrawable drawable = mDrawableBuilder.build(String.valueOf(curListData.data.charAt(0)), mColorGenerator.getColor(curListData.data));
holder.imageView.setImageDrawable(drawable);
holder.view.setBackgroundColor(Color.TRANSPARENT);

} else {
mFlipView.setBackgroundDrawable(mDrawableBuilder.build(" ", 0xff616161));
mFlipView.setImageResource(R.drawable.check_sm);
holder.view.setBackgroundColor(HIGHLIGHT_COLOR);
}
mFlipView.clearAnimation();
mFlipView.setAnimation(flipAnim2);
mFlipView.startAnimation(flipAnim2);
} else {
Log.e(TAG, "\n  onAnimationStart animation != flipAnim1");
curListData.setChecked(!curListData.isChecked);
}
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
Log.e(TAG, "onAnimationRepeat");
}

@Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
Log.e(TAG, "onAnimationEnd");
}
};

flipAnim1.setAnimationListener(animListner);
flipAnim2.setAnimationListener(animListner);
}

以上实现了圆形ImageView的翻转，但是这里有个bug，当快熟的点击上下图片，会发现上下同时旋转。而不是每个item的ImageView自己旋转自己的。这是因为2个动画的存在，后续考虑能都使用一个动画。

下篇介绍 实现Gmail邮箱翻转效果之ActionBar