[android]仿制新浪微博消息页面 图标切换动画

研究了下以前不怎么用到的动画效果的实现 

顺便做了一个新浪微博消息页面 图标切换动画 效果的实例

 

如图

然后封装了一下这个效果的实现代码

 

如下

 

package com.lurencun.unit.unit;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

/**
 * 标签切换对应动画效果实现类
 * 
 * @author poolo
 * @since 2012年8月10日
 * @version 1.0.0 完成了2,3,4个标签的情况下的处理(越多- -就要以笛卡尔积的数量增长- -我觉得呢2~4够用了)
 */
public class Unit {
    private int current = 0;
    private Activity at;
    private ImageView cursor;
    private float bmpW;
    private float screenW;
    private float offset;// 偏移量

    /**
     * 
     * @param a
     *            当前Activity
     * @param layoutId
     *            当前作为图标使用的ImageViewId
     * @param drawId
     *            当前图标的drawId
     * @param num
     *            当前标签个数
     */
    public Unit(Activity a, int viewId, int drawId, int num) {
        at = a;
        init(viewId, drawId, num);
    }

    /**
     * 纯粹是为了好看些的一个初始化数据包 无视这里吧
     * 
     * @param viewId
     * @param drawId
     * @param num
     */
    private void init(int viewId, int drawId, int num) {
        cursor = (ImageView) at.findViewById(viewId);
        bmpW = BitmapFactory.decodeResource(at.getResources(), drawId)
                .getWidth();
        screenW = at.getWindowManager().getDefaultDisplay().getWidth();
        offset = (screenW / num - bmpW) / 2;
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        cursor.setImageMatrix(matrix);
    }

    /**
     * 两个标签的情况
     * @param selectId 被选中的id
     */
    public void move2tag(int selectId) {
        Animation animation = null;
        float zero = 0;
        float one = offset * 2 + bmpW;
        switch (selectId) {
        case 0:
            if (current == 1) {
                animation = new TranslateAnimation(one, zero, 0, 0);
            }
            break;
        case 1:
            if (current == 0) {
                animation = new TranslateAnimation(zero, one, 0, 0);
            }
            break;
        }
        current = selectId;
        animation.setFillAfter(true);
        animation.setDuration(300);
        cursor.startAnimation(animation);
    }

    /**
     * 三个标签的情况
     * @param selectId 被选中的id
     */
    public void move3tag(int selectId) {
        Animation animation = null;
        float zero = 0;
        float one = offset * 2 + bmpW;
        float two = one * 2;
        switch (selectId) {
        case 0:
            if (current == 1) {
                animation = new TranslateAnimation(one, zero, 0, 0);
            }
            if (current == 2) {
                animation = new TranslateAnimation(two, zero, 0, 0);
            }
            break;
        case 1:
            if (current == 0) {
                animation = new TranslateAnimation(zero, one, 0, 0);
            }
            if (current == 2) {
                animation = new TranslateAnimation(two, one, 0, 0);
            }
            break;

        case 2:
            if (current == 0) {
                animation = new TranslateAnimation(zero, two, 0, 0);
            }
            if (current == 1) {
                animation = new TranslateAnimation(one, two, 0, 0);
                break;
            }
        }
        current = selectId;
        animation.setFillAfter(true);
        animation.setDuration(300);
        cursor.startAnimation(animation);
    }

    /**
     * 四个标签的情况
     * @param selectId 被选中的id
     */
    public void move4tag(int selectId) {
        Animation animation = null;
        float zero = 0;
        float one = offset * 2 + bmpW;
        float two = one * 2;
        float three = one * 3;
        switch (selectId) {
        case 0:
            if (current == 1) {
                animation = new TranslateAnimation(one, zero, 0, 0);
            }
            if (current == 2) {
                animation = new TranslateAnimation(two, zero, 0, 0);
            }
            if (current == 3) {
                animation = new TranslateAnimation(three, zero, 0, 0);
            }
            break;
        case 1:
            if (current == 0) {
                animation = new TranslateAnimation(zero, one, 0, 0);
            }
            if (current == 2) {
                animation = new TranslateAnimation(two, one, 0, 0);
            }
            if (current == 3) {
                animation = new TranslateAnimation(three, one, 0, 0);
            }
            break;

        case 2:
            if (current == 0) {
                animation = new TranslateAnimation(zero, two, 0, 0);
            }
            if (current == 1) {
                animation = new TranslateAnimation(one, two, 0, 0);

            }
            if (current == 3) {
                animation = new TranslateAnimation(three, two, 0, 0);
            }
            break;
        case 3:
            if (current == 0) {
                animation = new TranslateAnimation(zero, three, 0, 0);
            }
            if (current == 1) {
                animation = new TranslateAnimation(one, three, 0, 0);

            }
            if (current == 2) {
                animation = new TranslateAnimation(two, three, 0, 0);
            }
            break;
        }
        current = selectId;
        animation.setFillAfter(true);
        animation.setDuration(300);
        cursor.startAnimation(animation);
    }
}

 

 

 一个需要注意的地方 使用此方法的童鞋 切记自己的ImageView需要设置 android:scaleType="matrix" 才能使图形作为矩形计算 不至于出现错误

 

    <ImageView
        android:id="@+id/testImg1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello"
        android:scaleType="matrix"
        android:src="@drawable/jian_tou" />

 

 

部分借鉴与：http://www.eoeandroid.com/code/2012/0322/994_2.html

 

另如果路过的同学知道如何截android手机上的动态图麻烦留言告知下，谢谢。

 

jar包,源码,apk,截图都在下面。

 

 

已经交给团队封装代码的童鞋 将会封装到这个工具jar中

https://github.com/chenyoca/ToolkitForAndroid