Android 九宫格加载动画

这几天在看属性动画，突然想到可以实现自己手机的桌面启动的加载动画，就实现一下，效果如下图所示：

我的实现思路很简单，先实现单个方块的动画效果，再实现整体的联动效果。

（1）单个方块的动画效果：

为了易于扩展，我使用了自定义View来实现小红方块，并且创建了四个方法用来体现不同方向的移动动画。通过属性动画ObjectAnimator来实现动画效果。因为是组合动画，所以使用AnimatorSet，以向右移动为例：

 public void rotateRight() {            toX = formX + 200f;            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1, 0.5f, 1);            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1, 0.5f, 1);            ObjectAnimator animator1 = ObjectAnimator.ofFloat(this, "rotation", 0, -90f);            ObjectAnimator animator2 = ObjectAnimator.ofFloat(this, "translationX", formX, toX);            ObjectAnimator animator3 = ObjectAnimator.ofFloat(this, "translationY", formY, toY);            formX = toX;            AnimatorSet set = new AnimatorSet();            set.playTogether(animator1, animator2, animator3, scaleX, scaleY);            set.setDuration(300);            set.start();        }

这里面几个参数说明一下：

—scaleX:表示动画执行过程中X（宽度）的变化。1,0.5f,1 代表初始宽度为100%，向着50%变化，最后回到100%，ScaleY同理，即缩放动画
—translationX:表示动画执行工程中控件X坐标的变化，fromX代表初始位置X坐标，toX代表结束位置即位移动画
—rotation:表示动画执行过程中控件角度的变化，0代表开始的角度，1代表结束的角度，即旋转动画
—playTogether：表示动画时同时进行的。
我们看下效果：

小控件的部分就ok了，现在通过ViewGroup将其八个小方块联动起来。

（2）方块联动效果

首先，自定义ViewGroup，添加8个方块，按顺序排列好。为了之后的联动效果，我将使用下列顺序进行排序：

代码：

@Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        for (int i = 0; i < 8; i++) {            View childView = getChildAt(i);            int h, s;            if (i == 0) {                h = 1;                s = 2;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 1) {                h = 0;                s = 2;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 2) {                h = 0;                s = 1;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 3) {                h = 0;                s = 0;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 4) {                h = 1;                s = 0;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 5) {                h = 2;                s = 0;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 6) {                h = 2;                s = 1;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            } else if (i == 7) {                h = 1;                s = 1;                childView.layout(50 + h * 200, 50 + s * 200, h * 200 + 200, s * 200 + 200);            }        }

然后就是找控件的动画规律了，我们发现，控件8不动，控件1-7循环执行动画，且执行的动画也是在（右，右，下，下，左，左，上，上，右，右，下，下。。。）循环播放的。
有了规律，代码就好写了：

 //用于记录方块翻滚方向的规律    List<Integer> integerList;public void initIntegerList() {        integerList = new ArrayList<>();        integerList.add(0);        integerList.add(0);        integerList.add(1);        integerList.add(1);        integerList.add(2);        integerList.add(2);        integerList.add(3);        integerList.add(3);    } void move(int index) {        if(index%integerList.size() == 0 ||index%integerList.size() == 1) {            ((BlockView)getChildAt(index%7)).rotateRight();        } else if (index%integerList.size() == 2 ||index%integerList.size() == 3) {            ((BlockView)getChildAt(index%7)).rotateDown();        } else if (index%integerList.size() == 4 ||index%integerList.size() == 5) {            ((BlockView)getChildAt(index%7)).rotateLeft();        } else if (index%integerList.size() == 6 ||index%integerList.size() == 7) {            ((BlockView)getChildAt(index%7)).rotateUp();        }    }

现在，方块就可以联动的转起来了。目前方块的大小，颜色，动画的效果，执行的时间都是常量。可以根据需要去设置成变量，可以更加灵活一些。
最后附上源码：
代码地址