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

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

  它的实现原理是设置动画的同时并利用动画中的插入器(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中绚丽的的旋转菜单的更多相关文章

  1. Android 实现Path2.0中绚丽的的旋转菜单

    上图先: 那么下面开始吧~ 首先,将整个菜单动画分解开来. 1.       一级菜单按钮的旋转动画2个,十字和叉叉状态的转换. 2.       二级菜单按钮的平移动画2个,弹簧效果的in和out ...

  2. android圆形旋转菜单,而对于移动转换功能支持

    LZ该公司最近接手一个项目,需要写一个圆形旋转菜单,和菜单之间的移动换位支持,我本来以为这样的demo如若互联网是非常.想想你妈妈也帮不了我,空旋转,但它不能改变位置,所以LZ我们只能靠自己摸索. 最 ...

  3. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  4. jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单

    相信很多用过 Path 的都对它的独特的旋转导航菜单有深刻的印象,这个功能也被很多的 Web 开发者模仿.今天分享的这款插件可以方便的在你的网站中加入和 Path 一样的旋转菜单,可以自定义效果. 您 ...

  5. 在PyQt中构建 Python 菜单栏、菜单和工具栏

    摘要:菜单.工具栏和状态栏是大多数GUI 应用程序的常见且重要的图形组件.您可以使用它们为您的用户提供一种快速访问应用程序选项和功能的方法. 本文分享自华为云社区<Python 和 PyQt:创 ...

  6. 在 NetBeans IDE 6.0 中分析 Java 应用程序性能

    NetBeans IDE 6.0 包含一个强大的性能分析工具,可提供与应用程序运行时行为有关的重要信息.通过 NetBeans 性能分析工具,我们可以方便地在 IDE 中监控应用程序的线程状态.CPU ...

  7. xcode 5.0中,新的开发者证书加载方式

    按照先前从网上看到的参考,开通了开发者账号之后,要先在本地生成一个request文件,然后上传苹果开发者网站,然后在官网上生成一个证书.cer文件,拿这个文件在本地生成p12文件,然后就是一堆鸡零狗碎 ...

  8. 有关OpenCV1.0中GUI命令的几个函数学习总结

    1.修改窗口背景色或者光标形状 在OpenCV1.0版本利用函数int cvNamedWindow( const char* name, int flags )初始化创建一个窗口后,窗口的背景色是灰色 ...

  9. OpenGL立方体在世界坐标系中_缩放_旋转_平移_顶点片源着色器_光照作用_棋盘纹理贴图

    读取bmp等图片格式中的像素还有难度,就先用这个棋盘图象素来弄了 代码打错一个就一直First-chance exception ,貌似还有一个要用q或者Q才能成功退出,不知道缺少哪句,我用窗口红叉退 ...

随机推荐

  1. DIV+CSS 按比例等分

    div { display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */ width: calc(100% / 3.09); /* 此处运用了一个css3的表达式,将d ...

  2. (转)Python rsplit() 方法

    原文:https://www.cnblogs.com/wushuaishuai/p/7792874.html 目录 描述 语法 参数 返回值 实例 正文 回到顶部 描述 Python rsplit() ...

  3. Java之IO(一)InputStream和OutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...

  4. 【链表】Insertion Sort List

    题目: Sort a linked list using insertion sort. 思路: 插入排序是一种O(n^2)复杂度的算法,基本想法相信大家都比较了解,就是每次循环找到一个元素在当前排好 ...

  5. C/C++ -- Gui编程 -- Qt库的使用 -- 信号与槽的关联

    Qt信号与槽的三种关联方法:1.设计界面关联,编辑信号/槽,自动关联 2.手动关联(1).头文件中定义槽 -----mywidget.h----- #ifndef MYWIDGET_H #define ...

  6. vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...

  7. 数据库学习---SQL基础(一)

     数据库学习---SQL基础(一) 数据库学习---SQL基础(二) 数据库学习---SQL基础(三) SQL(struct query language)结构化查询语言:一种专门与数据库通信的语言, ...

  8. 在 Ubuntu下安装 labelImg (标数据用)

    安装 SIP 下载 SIP 并解压 : $ sudo python configure.py $ make $ sudo make install 安装 依赖库 $  sudo apt-get ins ...

  9. 转--log4j.properties 详解与配置步骤

    一.log4j.properties 的使用详解 1.输出级别的种类 ERROR.WARN.INFO.DEBUGERROR 为严重错误 主要是程序的错误WARN 为一般警告,比如session丢失IN ...

  10. 前端性能优化---缓存篇SDK

    1.把前端最常用的资源css.js存在本地1.1  前端缓存技术SessionStorage 优点:临时存储神器,关闭页面标签自动回收,不可以跨页面交互. 取值的时候有两种方法,一种是用session ...