实现Path2.0中绚丽的的旋转菜单

上图先：
 

那么下面开始吧~首先，将整个菜单动画分解开来。

1. 一级菜单按钮的旋转动画2个，十字和叉叉状态的转换。

2. 二级菜单按钮的平移动画2个，弹簧效果的in和out

3. 二级菜单按钮的点击效果，放大消失，其他未点击按钮缩小消失。

4. 一级菜单按钮的恢复效果，放大出现

好的  逐一去实现：
首先是一级菜单按钮的旋转动画，这2 个动画可以直接在xml 中定义，然后load 到代码中来，具体代码如下：
rotate_story_add_button_in.xml

1. 
   
2. <?xml version="1.0" encoding="UTF-8"?>
   
3. <rotate
   
4.      xmlns:android="http://schemas.android.com/apk/res/android"
   
5.           android:interpolator="@android :anim/linear_interpolator"
   
6.           android:duration="150"
   
7.           android:fromDegrees="0.0"
   
8.           android:toDegrees="-225.0"
   
9.           android:pivotX="50.0%"
   
10.           android:pivotY="50.0%"
    
11.           android:fillAfter="true"
    
12.           android:fillEnabled="true"
    
13.           />
    

复制代码

rotate_story_add_button_out.xml

1. 
   
2. <?xml version="1.0" encoding="UTF-8"?>
   
3. <rotate
   
4.      xmlns:android="http://schemas.android.com/apk/res/android"
   
5.           android:interpolator="@android :anim/linear_interpolator"
   
6.           android:duration="150"
   
7.           android:fromDegrees="-225.0"
   
8.           android:toDegrees="0.0"
   
9.           android:pivotX="50.0%"
   
10.           android:pivotY="50.0%"
    
11.           android:fillAfter="true"
    
12.           android:fillEnabled="true"
    
13.            />
    

复制代码

这2 段没什么好说的，定义好角度即可。
接下来是需要我们在代码中定义的动画部分，这几个动画的部分需要定义一个基类，作为统一的调用接口，这个基类被称作InOutAnimation, 继承自AnimationSet ，这个基类的主要工作是为view 提供in 和out 两种不同的状态时的动画效果。其子类需要实现2 个方法：

1. 
   
2. protected abstract void addInAnimation(View aview[]);
   
3. protected abstract void addOutAnimation(View aview[]);
   

复制代码

从而进行view 的入场和离场动画。 下面是InOutAnimation 的代码部分：

1. 
   
2. public abstract class InOutAnimation extends AnimationSet {
   
3.   
   
4.           public Direction        direction;
   
5.   
   
6.           public enum Direction {
7.                     IN, OUT;
8.           }
   
9.   
   
10.           public InOutAnimation(Direction direction, long l, View[] aview) {
    
11.                     super(true);
    
12.                     this.direction = direction;
    
13.                     switch (this.direction) {
    
14.                     case IN:
    
15.                              addInAnimation(aview);
    
16.                              break;
    
17.                     case OUT:
    
18.                              addOutAnimation(aview);
    
19.                              break;
    
20.                     }
    
21.                     setDuration(l);
    
22.           }
    
23.   
    
24.           protected abstract void addInAnimation(View aview[]);
    
25.           protected abstract void addOutAnimation(View aview[]);
    
26.   
    
27. }
    

复制代码

接下来就是重头戏啦，二级菜单按钮的平移动画。
这部分动画看起来可能会比较复杂和神秘，其实不然，当把整个动画过程分解开来的时候，都是最最简单的平移而已，我们要做的只是定义一下平移的起点和终点、开始动画的顺序以及插值（Interpolator），让整个过程看起来很炫。
先说动画的起点和终点吧，起点很简单，就是整个view的左下角，即0,0点，为了效果漂亮一些，我们稍微的将左下角位置定义的有一些偏移，经验上的值是16，-13，这个点的位置看你心情而定咯~ 好 终点就是你想让他在的点上就好了，终点我们将定义到layout中去，为这个2级菜单指定一个margin的值就好。
还是上代码比较直观：
动画如下：

1. 
   
2. 
   
3. 收缩部分：TranslateAnimation(xOffset + -mlp.leftMargin, 0F,yOffset + mlp.bottomMargin, 0F)
   
4. 扩张部分：TranslateAnimation(0F, xOffset + -mlp.leftMargin, 0F,yOffset + mlp.bottomMargin)
   

复制代码

位置定义部分：
例如：
android:layout_marginBottom="142dp" android:layout_marginLeft="10.667dp"
这个位置大家可以直观的在布局文件中看到，详细的布局文件也将在下面展示。
以上是单独的每一个二级按钮的动画，而组合的动画就是指定了一下开始的时间差以及插值：
这个就是奥妙所在了，OvershootInterpolator AnticipateInterpolator  这2 个插值器提供了弹力效果。
整段的代码如下：
ComposerButtonAnimation.java

1. 
   
2. public class ComposerButtonAnimation extends InOutAnimation {
   
3.   
   
4.           public static final int                  DURATION       = 500;
   
5.           private static final int       xOffset              = 16;
   
6.           private static final int       yOffset              = -13;
   
7.   
   
8.           public ComposerButtonAnimation(Direction direction, long l, View view) {
   
9.                     super(direction, l, new View[] { view });
   
10.           }
    
11.   
    
12.           public static void startAnimations(ViewGroup viewgroup,
    
13.                              InOutAnimation.Direction direction) {
    
14.                     switch (direction) {
    
15.                     case IN:
    
16.                              startAnimationsIn(viewgroup);
    
17.                              break;
    
18.                     case OUT:
    
19.                              startAnimationsOut(viewgroup);
    
20.                              break;
    
21.                     }
    
22.           }
    
23.   
    
24.           private static void startAnimationsIn(ViewGroup viewgroup) {
    
25.                     for (int i = 0; i < viewgroup.getChildCount(); i++) {
    
26.                              if (viewgroup.getChildAt(i) instanceof InOutImageButton) {
    
27.                                       InOutImageButton inoutimagebutton = (InOutImageButton) viewgroup
    
28.                                                          .getChildAt(i);
    
29.                                       ComposerButtonAnimation animation = new ComposerButtonAnimation(
    
30.                                                          InOutAnimation.Direction.IN, DURATION, inoutimagebutton);
    
31.                                       animation.setStartOffset((i * 100)
    
32.                                                          / (-1 + viewgroup.getChildCount()));
    
33.                                       animation.setInterpolator(new OvershootInterpolator(2F));
    
34.                                       inoutimagebutton.startAnimation(animation);
    
35.                              }
    
36.                     }
    
37.           }
    
38.   
    
39.           private static void startAnimationsOut(ViewGroup viewgroup) {
    
40.                     for (int i = 0; i < viewgroup.getChildCount(); i++) {
    
41.                              if (viewgroup.getChildAt(i) instanceof InOutImageButton) {
    
42.                                       InOutImageButton inoutimagebutton = (InOutImageButton) viewgroup
    
43.                                                          .getChildAt(i);
    
44.                                       ComposerButtonAnimation animation = new ComposerButtonAnimation(
    
45.                                                          InOutAnimation.Direction.OUT, DURATION,
    
46.                                                          inoutimagebutton);
    
47.                                       animation.setStartOffset((100 * ((-1 + viewgroup
    
48.                                                          .getChildCount()) - i))
    
49.                                                          / (-1 + viewgroup.getChildCount()));
    
50.                                        animation.setInterpolator(new AnticipateInterpolator(2F));
    
51.                                       inoutimagebutton.startAnimation(animation);
    
52.                              }
    
53.                     }
    
54.           }
    
55.   
    
56.           @Override
    
57.           protected void addInAnimation(View[] aview) {
    
58.                     MarginLayoutParams mlp = (MarginLayoutParams) aview[0]
    
59.                                       .getLayoutParams();
    
60.                     addAnimation(new TranslateAnimation(xOffset + -mlp.leftMargin, 0F,
    
61.                                       yOffset + mlp.bottomMargin, 0F));
    
62.           }
    
63.   
    
64.           @Override
    
65.           protected void addOutAnimation(View[] aview) {
    
66.                     MarginLayoutParams mlp = (MarginLayoutParams) aview[0]
    
67.                                       .getLayoutParams();
    
68.                     addAnimation(new TranslateAnimation(0F, xOffset + -mlp.leftMargin, 0F,
    
69.                                       yOffset + mlp.bottomMargin));
    
70.           }
    
71. }
    
72. 
    

复制代码

剩下的增大出现、增大消失及缩小消失都是scale 和alpha 的组合动画
例如增大出现为：

1. 
   
2. 
   
3. addAnimation(new ScaleAnimation(0F, 1F, 0F, 1F, 1, 0.5F, 1, 0.5F));
   
4. addAnimation(new AlphaAnimation(0F, 1F));
   

复制代码

整段的代码如下：

1. 
   
2. public class ComposerButtonGrowAnimationIn extends InOutAnimation {
   
3.   
   
4.           public ComposerButtonGrowAnimationIn(int i) {
   
5.                     super(InOutAnimation.Direction.IN, i, new View[0]);
   
6.           }
   
7.   
   
8.           @Override
   
9.           protected void addInAnimation(View[] aview) {
   
10.                     addAnimation(new ScaleAnimation(0F, 1F, 0F, 1F, 1, 0.5F, 1, 0.5F));
    
11.                     addAnimation(new AlphaAnimation(0F, 1F));
    
12.   
    
13.           }
    
14.   
    
15.           @Override
    
16.           protected void addOutAnimation(View[] aview) {}
    
17.   
    
18. }
    
19.   
    
20. public class ComposerButtonGrowAnimationOut extends InOutAnimation {
    
21.   
    
22.           public ComposerButtonGrowAnimationOut(int i) {
    
23.                     super(InOutAnimation.Direction.OUT, i, new View[0]);
    
24.           }
    
25.   
    
26.           @Override
    
27.           protected void addInAnimation(View[] aview) {}
    
28.   
    
29.           @Override
    
30.           protected void addOutAnimation(View[] aview) {
    
31.                     addAnimation(new ScaleAnimation(1F, 5F, 1F, 5F, 1, 0.5F, 1, 0.5F));
    
32.                     addAnimation(new AlphaAnimation(1F, 0F));
    
33.           }
    
34.   
    
35. } public class ComposerButtonShrinkAnimationOut extends InOutAnimation {
    
36.   
    
37.           public ComposerButtonShrinkAnimationOut(int i) {
    
38.                     super(InOutAnimation.Direction.OUT, i, new View[0]);
    
39.           }
    
40.   
    
41.           @Override
    
42.           protected void addInAnimation(View[] aview) {
    
43.   
    
44.           }
    
45.   
    
46.           @Override
    
47.           protected void addOutAnimation(View[] aview) {
    
48.                     addAnimation(new ScaleAnimation(1F, 0F, 1F, 0F, 1, 0.5F, 1, 0.5F));
    
49.                     addAnimation(new AlphaAnimation(1F, 0F));
    
50.           }
    
51.   
    
52. }
    

复制代码

接下来我们需要为这些控件做一下扩展，以便其可以再动画完成后显示或消失。
很简单

1. 
   
2. public class InOutImageButton extends ImageButton {
   
3.   
   
4.           private Animation    animation;
   
5.   
   
6.           public InOutImageButton(Context context, AttributeSet attrs, int defStyle) {
   
7.                     super(context, attrs, defStyle);
   
8.           }
   
9.   
   
10.           public InOutImageButton(Context context, AttributeSet attrs) {
    
11.                     super(context, attrs);
    
12.           }
    
13.   
    
14.           public InOutImageButton(Context context) {
    
15.                     super(context);
    
16.           }
    
17.   
    
18.           @Override
    
19.           protected void onAnimationEnd() {
    
20.                     super.onAnimationEnd();
    
21.                     if ((this.animation instanceof InOutAnimation)) {
    
22.                              setVisibility(((InOutAnimation) this.animation).direction != InOutAnimation.Direction.OUT ? View.VISIBLE
    
23.                                                 : View.GONE);
    
24.                     }
    
25.           }
    
26.   
    
27.           @Override
    
28.           protected void onAnimationStart() {
    
29.                     super.onAnimationStart();
    
30.                     if ((this.animation instanceof InOutAnimation))
    
31.                              setVisibility(View.VISIBLE);
    
32.           }
    
33.   
    
34.           @Override
    
35.           public void startAnimation(Animation animation) {
    
36.                     super.startAnimation(animation);
    
37.                     this.animation = animation;
    
38.                     getRootView().postInvalidate();
    
39.           }
    
40. }