这两天无意间看到一园友的博文实现Path2.0中绚丽的的旋转菜单,感觉效果不错,但是发现作者没有处理线程安全的问题,所以在这里我修正了下,并且改善下部分功能。今天发布这篇文章的目的是希望能在Android用户体验上提出一些相关的解决方案,方便我们在开发项目或产品时增强用户体验效果,当然也希望能起到抛砖引玉的作用。
=废话不多说,还是老规矩,先让我们看一下实现的效果图:
=在上图中,我将菜单弹出的效果设置成直线型,最终的弹出或汇总点在下面的红色按钮中。
它的实现原理是设置动画的同时并利用动画中的插入器(interpolator)来实现弹力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator,简单介绍下这两个插入器。
我们可以通过一些示例加深对这几个插入器的了解。在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实现伸缩弹力分布菜单效果 * @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<&#63;>[] 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; icls; private int resource; private SpringMenuLauncher(Class<&#63;> 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度变成叉号,通过如下的动画:
<&#63;xml version="1.0" encoding="UTF-8"&#63;>
再次点击则向左旋转还原,将上面的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
该类继承自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中实现伸缩弹力分布菜单效果的实现过程,