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

时间： 2024-08-04 00:46:47

Path2.0中绚丽的的旋转菜单的相关文章

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

上图先: 那么下面开始吧~ 首先,将整个菜单动画分解开来. 1.       一级菜单按钮的旋转动画2个,十字和叉叉状态的转换. 2.       二级菜单按钮的平移动画2个,弹簧效果的in和out 3.       二级菜单按钮的点击效果,放大消失,其他未点击按钮缩小消失. 4.       一级菜单按钮的恢复效果,放大出现 好的 逐一去实现: 首先是一级菜单按钮的旋转动画,这2个动画可以直接在xml中定义,然后load到代码中来,具体代码如下: rotate_story_add_button

android圆形旋转菜单，并支持移动换位功能

LZ最近接手公司一个项目,需要写一个圆形的旋转菜单,并且支持菜单之间的移动换位,本来以为这种demo应该网上是很多的,想不到度娘也是帮不了我,空有旋转功能但是却不能换位置,所以LZ就只能靠自己摸索了. 最终LZ参考了网上的部分代码,重写了一个自定义的view终于实现了这个看似很吊,却没有实际意义的功能.在此贡献出来给广大码农们共享. 话不多说,先上代码: 自定义view类: public class RoundSpinView extends View { private Paint mPain

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

LZ该公司最近接手一个项目,需要写一个圆形旋转菜单,和菜单之间的移动换位支持,我本来以为这样的demo如若互联网是非常.想想你妈妈也帮不了我,空旋转,但它不能改变位置,所以LZ我们只能靠自己摸索. 最后LZ参考代码的在线部分.了一个自己定义的view最终实现了这个看似非常吊.却没有实际意义的功能. 在此贡献出来给广大码农们共享. 话不多说,先上代码: 自己定义view类: public class RoundSpinView extends View { private Paint mPaint

老二牛车Axure夜话：Axure手机原型视频教程之Path2.0菜单

老二牛车Axure夜话:Axure手机原型视频教程之Path2.0菜单 案例描述:Path2.0菜单 知识点: Axure中继器 综合操作 ....... 效果图: 本站在线效果预览:http://www.iniuche.com/phonelesson/path201/start.html#p=home(firefox原型文件) AxShare在线效果预览: 原型下载地址:Path2.0菜单.rp 在线视频: 实现步骤: 更新中…..

3D旋转菜单

今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transform里有transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素. transform-origin 属性允许您改变被转换元素的位置. backface-visibility 属性定义当元素不面向屏幕时是否可见. 代码: <!DOCTYPE html> <html lang

【小松教你手游开发】【系统模块开发】做一个3d旋转菜单

在unity做一个3d旋转菜单,像乱斗西游2的这种: 暂时有两种方法可以实现: 一.当做是2d界面,通过定义几个固定点的坐标.大小.透明度,还有每个点的panel depth大小,把数据存储下来,在手机滑动的过程中计算滑动划过的距离和这个panel大小的比值,乘以两个点之间的距离,获得坐标点移动的距离,通过改变x轴改变位置,同理改变大小和透明度. 这个方法我自己做2d游戏的时候实现过,做起来比较简单,没有什么可拓展性可言,并且会有很多限制,比如拖动过程中很难转变方向.要自己实现运动中的弹性(这里

下角动画旋转菜单、圆心弹出菜单ArcMenu 源码解析

支持类似Path的左下角动画旋转菜单及横向划出菜单.圆心弹出菜单 项目地址:https://github.com/daCapricorn/ArcMenu 一.关注3个效果 点击中心控制点 的时候,展开效果: 中心控制点旋转45度的动画 周围children 弹出动画 2.点击中心控制点的时候,收缩动画: 中心控制点旋转45度 周围children 自旋转并收缩 3.展开时候,点击child 被点击的child放大, 其他chidren 消失 二.3个java文件 ArcMenu.java  自定

Android之——史上最简单旋转菜单实现效果

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48048323 由于身体原因,前几天没有给大家更新博客,那么,今天我们就来一起实现一个非常酷炫的旋转菜单效果吧.在很多APP中,不难发现,人家把菜单效果设计的那叫一个酷炫啊,其中一种设计就是将菜单设计成旋转的效果.好了,那么这么酷炫的菜单效果是如何实现的呢?下面,就让我们一起来实现这个酷炫的菜单效果吧. 一.原理 老规矩,还是先唠叨下原理级别的东西. 这个示例的实现原理很简单,利用

底部旋转菜单

Main.storyboard ViewController.m // //  ViewController.m //  8A07.底部旋转菜单 // //  Created by huan on 16/2/6. //  Copyright © 2016年 huanxi. All rights reserved. // #import "ViewController.h" #import "CZBottomMenu.h" @interface ViewControl