文章列表
以下文章是github文章的分解,力求讲清楚类gMail效果如何实现。
本文是其中的第二篇: 翻转动画。完整的代码查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个动画的存在,后续考虑能都使用一个动画。