Android实现伸缩弹力分布菜单效果的示例
这两天无意间看到一园友的博文实现path2.0中绚丽的的旋转菜单,感觉效果不错,但是发现作者没有处理线程安全的问题,所以在这里我修正了下,并且改善下部分功能。今天发布这篇文章的目的是希望能在android用户体验上提出一些相关的解决方案,方便我们在开发项目或产品时增强用户体验效果,当然也希望能起到抛砖引玉的作用。
=废话不多说,还是老规矩,先让我们看一下实现的效果图:
=在上图中,我将菜单弹出的效果设置成直线型,最终的弹出或汇总点在下面的红色按钮中。
它的实现原理是设置动画的同时并利用动画中的插入器(interpolator)来实现弹力。主要用到了overshootinterpolator和anticipateovershootinterpolator,简单介绍下这两个插入器。
- overshootinterpolator:表示向前甩一定值后再回到原来位置。
- anticipateovershootinterpolator:表示开始的时候向后然后向前甩一定值后返回最后的值。
- 当然还有其它的插入器,简要了解下其作用:
- anticipateinterpolator:表示开始的时候向后然后向前甩。
- bounceinterpolator:表示动画结束的时候弹起。
- 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实现伸缩弹力分布菜单效果 * @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中实现伸缩弹力分布菜单效果的实现过程,