这两天无意间看到一园友的博文实现Path2.0中绚丽的的旋转菜单，感觉效果不错，但是发现作者没有处理线程安全的问题，所以在这里我修正了下，并且改善下部分功能。今天发布这篇文章的目的是希望能在AndroID用户体验上提出一些相关的解决方案，方便我们在开发项目或产品时增强用户体验效果，当然也希望能起到抛砖引玉的作用。
=废话不多说，还是老规矩，先让我们看一下实现的效果图：
=在上图中，我将菜单d出的效果设置成直线型，最终的d出或汇总点在下面的红色按钮中。
它的实现原理是设置动画的同时并利用动画中的插入器（interpolator）来实现d力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator，简单介绍下这两个插入器。
OvershootInterpolator：表示向前甩一定值后再回到原来位置。 AnticipateOvershootInterpolator：表示开始的时候向后然后向前甩一定值后返回最后的值。 当然还有其它的插入器，简要了解下其作用： AnticipateInterpolator：表示开始的时候向后然后向前甩。 BounceInterpolator：表示动画结束的时候d起。 OvershootInterpolator：表示向前甩一定值后再回到原来位置。 CycleInterpolator：表示动画循环播放特定的次数，速率改变沿着正弦曲线。 DecelerateInterpolator：表示在动画开始的地方快然后慢。 linearInterpolator：表示以常量速率改变。我们可以通过一些示例加深对这几个插入器的了解。在API Demos中有些示例，大家去可以直接研究下API Demos中的Animation部分。
先来了解下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实现伸缩d力分布菜单效果 * @Description: AndroID实现伸缩d力分布菜单效果 * @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,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); }}在点击红色按钮时d出最上面的菜单，点击某个菜单时变换上面的背景图片，当然也可直接进入某个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,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,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,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;/** * 实现伸缩d力分布菜单布局类 * @Description: 实现伸缩d力分布菜单布局类 * @file: SpringMenulayout.java * @Package com.spring.menu.layout * @Author Hanyonglu * @Date 2012-10-26 下午07:57:56 * @Version V1.0 */public class SpringMenulayout { // 自动生成直线型布局 // 自动生成圆弧型布局} 以上是关于AndroID中实现伸缩d力分布菜单效果的实现过程，
总结以上是内存溢出为你收集整理的Android实现伸缩d力分布菜单效果的示例全部内容，希望文章能够帮你解决Android实现伸缩d力分布菜单效果的示例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）