首页 > 代码库 > 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 = 0; 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(300);        Animation growOut = new EnlargeAnimationOut(300);        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="200"    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 = 210;    private static int yOffset = -15;    public static final int DURATION = 300;        /**     * 构造器     * @param direction     * @param duration     * @param view     */    public SpringAnimation(Direction direction, long duration, View view) {        super(direction, duration, new View[] { view });        SpringAnimation.xOffset = SpringAnimation.size[0] / 2 - 30;    }    /**     * 开始显示动画效果     * @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 = 0; 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 * 200)                        / (-1 + viewgroup.getChildCount()));                animation.setInterpolator(new OvershootInterpolator(4F));                inoutimagebutton.startAnimation(animation);            }        }    }    /**     * 开始隐藏菜单     * @param viewgroup     */    private static void startShrinkAnimations(ViewGroup viewgroup) {        for (int i = 0; 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((100 * ((-1 + viewgroup                        .getChildCount()) - i))                        / (-1 + 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[0].                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[0].                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中绚丽的的旋转菜单