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

我们看一下实现的效果图：

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

在上图中，我将菜单弹出的效果设置成直线型，最终的弹出或汇总点在下面的红色按钮中。

　　它的实现原理是设置动画的同时并利用动画中的插入器（interpolator）来实现弹力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator，简单介绍下这两个插入器。

OvershootInterpolator：表示向前甩一定值后再回到原来位置。
AnticipateOvershootInterpolator：表示开始的时候向后然后向前甩一定值后返回最后的值。

　　当然还有其它的插入器，简要了解下其作用：

AnticipateInterpolator：表示开始的时候向后然后向前甩。
BounceInterpolator：表示动画结束的时候弹起。
OvershootInterpolator：表示向前甩一定值后再回到原来位置。
CycleInterpolator：表示动画循环播放特定的次数，速率改变沿着正弦曲线。
DecelerateInterpolator：表示在动画开始的地方快然后慢。
LinearInterpolator：表示以常量速率改变。

　　我们可以通过一些示例加深对这几个插入器的了解。在API Demos中有些示例，大家去可以直接研究下API Demos中的Animation部分。

　　具体可查看官方文档：http://developer.android.com/reference/android/view/animation/package-summary.html，这里不再详述。

MainActivity中的代码：

package com.spring.menu.activity;

import com.spring.menu.R;

import com.spring.menu.animation.SpringAnimation;

import com.spring.menu.animation.EnlargeAnimationOut;

import com.spring.menu.animation.ShrinkAnimationOut;

import com.spring.menu.animation.ZoomAnimation;

import com.spring.menu.utility.DeviceUtility;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.view.View.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.view.animation.AnticipateInterpolator;

import android.widget.RelativeLayout;

/**

 * Android实现伸缩弹力分布菜单效果

 * @Description: Android实现伸缩弹力分布菜单效果

 * @File: MainActivity.java

 * @Package com.spring.menu.activity

 * @Author Hanyonglu

 * @Date 2012-10-25 下午09:41:31

 * @Version V1.0

 */

public class MainActivity extends Activity {

    private boolean    areMenusShowing;

    private ViewGroup menusWrapper;

    private View imageViewPlus;

    private View shrinkRelativeLayout;

    private RelativeLayout layoutMain;

    // 顺时针旋转动画

    private Animation animRotateClockwise;

    // 你试着旋转动画

    private Animation animRotateAntiClockwise;

    private Class<?>[] intentActivity = {

            SecondActivity.class,ThreeActivity.class,FourActivity.class,

            SecondActivity.class,ThreeActivity.class,FourActivity.class};

    private int[] mainResources = {

            R.drawable.bg_main_1,R.drawable.bg_main_2,

            R.drawable.bg_main_3,R.drawable.bg_main_4,

            R.drawable.bg_main_1,R.drawable.bg_main_4};

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main_activity);

        // 初始化

        initViews();

    }

    // 初始化

    private void initViews(){

        imageViewPlus = findViewById(R.id.imageview_plus);

        menusWrapper = (ViewGroup) findViewById(R.id.menus_wrapper);

        shrinkRelativeLayout = findViewById(R.id.relativelayout_shrink);

        layoutMain = (RelativeLayout) findViewById(R.id.layout_content);

        animRotateClockwise = AnimationUtils.loadAnimation(

                this,R.anim.rotate_clockwise);

        animRotateAntiClockwise = AnimationUtils.loadAnimation(

                this,R.anim.rotate_anticlockwise);

        shrinkRelativeLayout.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {

                // TODO Auto-generated method stub

                showLinearMenus();

            }

        });

        for (int i = ; i < menusWrapper.getChildCount(); i++) {

            menusWrapper.getChildAt(i).setOnClickListener(

                    new SpringMenuLauncher(null,mainResources[i]));

        }

    }

    /**

     * 以直线型展开菜单

     */

    private void showLinearMenus() {

        int[] size = DeviceUtility.getScreenSize(this);

        if (!areMenusShowing) {

            SpringAnimation.startAnimations(

                    this.menusWrapper, ZoomAnimation.Direction.SHOW, size);

            this.imageViewPlus.startAnimation(this.animRotateClockwise);

        } else {

            SpringAnimation.startAnimations(

                    this.menusWrapper, ZoomAnimation.Direction.HIDE, size);

            this.imageViewPlus.startAnimation(this.animRotateAntiClockwise);

        }

        areMenusShowing = !areMenusShowing;

    }

    // 分布菜单事件监听器

    private class SpringMenuLauncher implements OnClickListener {

        private final Class<?> cls;

        private int resource;

        private SpringMenuLauncher(Class<?> c,int resource) {

            this.cls = c;

            this.resource = resource;

        }

        public void onClick(View v) {

            // TODO Auto-generated method stub

            MainActivity.this.startSpringMenuAnimations(v);

            layoutMain.setBackgroundResource(resource);

//            MainActivity.this.startActivity(

//                    new Intent(

//                            MainActivity.this,

//                            MainActivity.SpringMenuLauncher.this.cls));

        }

    }

    /**

     * 展现菜单动画效果

     * @param view

     * @param runnable

     */

    private void startSpringMenuAnimations(View view) {

        areMenusShowing = true;

        Animation shrinkOut1 = new ShrinkAnimationOut();

        Animation growOut = new EnlargeAnimationOut();

        shrinkOut1.setInterpolator(new AnticipateInterpolator(2.0F));

        shrinkOut1.setAnimationListener(new Animation.AnimationListener() {

            public void onAnimationEnd(Animation animation) {

                // TODO Auto-generated method stub

                MainActivity.this.imageViewPlus.clearAnimation();

            }

            public void onAnimationRepeat(Animation animation) {

                // TODO Auto-generated method stub

            }

            public void onAnimationStart(Animation animation) {

                // TODO Auto-generated method stub

            }

        });

        view.startAnimation(growOut);

    }

}

在点击红色按钮时弹出最上面的菜单，点击某个菜单时变换上面的背景图片，当然也可直接进入某个Activity。所以上面定义了 intentActivity和mainResources两个数组，分别代表切换的Activity和要变换的图片。大家可根据实际的需要进行设置。在进行点击红色按钮时中间的加号向右进行旋转225度变成叉号，通过如下的动画：

<?xml version="1.0" encoding="UTF-8"?>

<rotate

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/linear_interpolator"

    android:duration=""

    android:fromDegrees="0.0"

    android:toDegrees="225.0"

    android:pivotX="50.0%"

    android:pivotY="50.0%"

    android:fillAfter="true"

    android:fillEnabled="true"/>

再次点击则向左旋转还原，将上面的android:fromDegrees和android:toDegrees替换下即可。

下面了解下另一个重要的动画类是SpringAnimation，由它来控制各个菜单的动画效果，代码如下所示：

package com.spring.menu.animation;

import com.spring.menu.control.ImageButtonExtend;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.MarginLayoutParams;

import android.view.animation.AnticipateInterpolator;

import android.view.animation.AnticipateOvershootInterpolator;

import android.view.animation.OvershootInterpolator;

import android.view.animation.TranslateAnimation;

/**

 * 分布菜单加载和伸缩动画

 * @Description: 分布菜单加载和伸缩动画

 * @File: SpringAnimation.java

 * @Package com.spring.menu.animation

 * @Author Hanyonglu

 * @Date 2012-10-25 下午12:18:39

 * @Version V1.0

 */

public class SpringAnimation extends ZoomAnimation {

    private static int[] size;

    private static int xOffset = ;

    private static int yOffset = -;

    public static final int DURATION = ;

    /**

     * 构造器

     * @param direction

     * @param duration

     * @param view

     */

    public SpringAnimation(Direction direction, long duration, View view) {

        super(direction, duration, new View[] { view });

        SpringAnimation.xOffset = SpringAnimation.size[] /  - ;

    }

    /**

     * 开始显示动画效果

     * @param viewgroup

     * @param direction

     * @param size

     */

    public static void startAnimations(ViewGroup viewgroup,

            ZoomAnimation.Direction direction, int[] size) {

        SpringAnimation.size = size;

        switch (direction) {

        case HIDE:

            startShrinkAnimations(viewgroup);

            break;

        case SHOW:

            startEnlargeAnimations(viewgroup);

            break;

        }

    }

    /**

     * 开始呈现菜单

     * @param viewgroup

     */

    private static void startEnlargeAnimations(ViewGroup viewgroup) {

        for (int i = ; i < viewgroup.getChildCount(); i++) {

            if (viewgroup.getChildAt(i) instanceof ImageButtonExtend) {

                ImageButtonExtend inoutimagebutton = (ImageButtonExtend) viewgroup

                        .getChildAt(i);

                SpringAnimation animation = new SpringAnimation(

                        ZoomAnimation.Direction.HIDE, DURATION, inoutimagebutton);

                animation.setStartOffset((i * )

                        / (- + viewgroup.getChildCount()));

                animation.setInterpolator(new OvershootInterpolator(4F));

                inoutimagebutton.startAnimation(animation);

            }

        }

    }

    /**

     * 开始隐藏菜单

     * @param viewgroup

     */

    private static void startShrinkAnimations(ViewGroup viewgroup) {

        for (int i = ; i < viewgroup.getChildCount(); i++) {

            if (viewgroup.getChildAt(i) instanceof ImageButtonExtend) {

                ImageButtonExtend inoutimagebutton = (ImageButtonExtend) viewgroup

                        .getChildAt(i);

                SpringAnimation animation = new SpringAnimation(

                        ZoomAnimation.Direction.SHOW, DURATION,

                        inoutimagebutton);

                animation.setStartOffset(( * ((- + viewgroup

                        .getChildCount()) - i))

                        / (- + viewgroup.getChildCount()));

                animation.setInterpolator(new AnticipateOvershootInterpolator(2F));

                inoutimagebutton.startAnimation(animation);

            }

        }

    }

    @Override

    protected void addShrinkAnimation(View[] views) {

        // TODO Auto-generated method stub

        MarginLayoutParams mlp = (MarginLayoutParams) views[].

                getLayoutParams();

        addAnimation(new TranslateAnimation(

                xOffset + -mlp.leftMargin,

                0F,yOffset + mlp.bottomMargin, 0F));

    }

    @Override

    protected void addEnlargeAnimation(View[] views) {

        // TODO Auto-generated method stub

        MarginLayoutParams mlp = (MarginLayoutParams) views[].

                getLayoutParams();

        addAnimation(new TranslateAnimation(

                0F, xOffset + -mlp.leftMargin,

                0F,yOffset + mlp.bottomMargin));

    }

}

该类继承自ZoomAnimation，关于ZoomAnimation代码如下：

package com.spring.menu.animation;

import android.view.View;

import android.view.animation.AnimationSet;

/**

 * 放大缩小动画类

 * @Description: 放大缩小动画类

 * @File: ZoomAnimation.java

 * @Package com.spring.menu.animation

 * @Author Hanyonglu

 * @Date 2012-10-25 下午11:37:52

 * @Version V1.0

 */

public abstract class ZoomAnimation extends AnimationSet {

    public Direction direction;

    public enum Direction {

        HIDE, SHOW;

    }

    public ZoomAnimation(Direction direction, long duration, View[] views) {

        super(true);

        this.direction = direction;

        switch (this.direction) {

        case HIDE:

            addShrinkAnimation(views);

            break;

        case SHOW:

            addEnlargeAnimation(views);

            break;

        }

        setDuration(duration);

    }

    protected abstract void addShrinkAnimation(View[] views);

    protected abstract void addEnlargeAnimation(View[] views);

}

　　有时我们为了增强用户体验，我们可以将直线设置成半圆形或是半椭圆形，可以利用Bresenham算法或是其它的方案实现半圆或半椭圆的菜单，而不是简单的将菜单定位在某个地方。关于这个，有兴趣的朋友可参阅相关资料去实现它。

　　另外，上面的例子并没有实现动态的设置菜单的个数。个人觉得最好能动态设置菜单的布局，这样在添加或减少菜单时比较方便。一般的过程是利用一个数组(代表图片资源)，根据数组来实现它的布局。包括上段中提到的实现半圆形展开也要进行动态的设置。本来我想去实现它，但是真的没有那么多时间，有需要的朋友可以去填充程序的SpringMenuLayout类，在这里我就不去实现它了。

package com.spring.menu.layout;

/**

 * 实现伸缩弹力分布菜单布局类

 * @Description: 实现伸缩弹力分布菜单布局类

 * @File: SpringMenuLayout.java

 * @Package com.spring.menu.layout

 * @Author Hanyonglu

 * @Date 2012-10-26 下午07:57:56

 * @Version V1.0

 */

public class SpringMenuLayout {

    // 自动生成直线型布局

    // 自动生成圆弧型布局

}

以上是关于Android中实现伸缩弹力分布菜单效果的实现过程，由于本篇不算是原创性的文章，所以关于代码没有过多的讲解，具体的代码讲解可参考原创文章：http://www.cnblogs.com/mudoot/archive/2012/01/19/path_composer_menu.html ，同时也非常感谢原创作者提供的资料。

示例下载：/Files/hanyonglu/AndroidFile/MySpringMenu.rar

Github地址：https://github.com/hanyonglu/Android-Spring-Menu

秒客网

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

相关文章