实现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