Android實現伸縮彈力分佈菜單效果詳解

時間 2019-11-12

原文原文鏈接

這兩天無心間看到一園友的博文實現Path2.0中絢麗的的旋轉菜單，感受效果不錯，可是發現做者沒有處理線程安全的問題，因此在這裏我修正了下，而且改善下部分功能。今天發佈這篇文章的目的是但願能在Android用戶體驗上提出一些相關的解決方案，方便咱們在開發項目或產品時加強用戶體驗效果，固然也但願能起到拋磚引玉的做用。 html

廢話很少說，仍是老規矩，先讓咱們看一下實現的效果圖： java

　在上圖中，我將菜單彈出的效果設置成直線型，最終的彈出或彙總點在下面的紅色按鈕中。 android

它的實現原理是設置動畫的同時並利用動畫中的插入器（interpolator）來實現彈力。主要用到了OvershootInterpolator和AnticipateOvershootInterpolator，簡單介紹下這兩個插入器。算法

OvershootInterpolator：表示向前甩必定值後再回到原來位置。
AnticipateOvershootInterpolator：表示開始的時候向後而後向前甩必定值後返回最後的值。

固然還有其它的插入器，簡要了解下其做用： spring

AnticipateInterpolator：表示開始的時候向後而後向前甩。
BounceInterpolator：表示動畫結束的時候彈起。
OvershootInterpolator：表示向前甩必定值後再回到原來位置。
CycleInterpolator：表示動畫循環播放特定的次數，速率改變沿着正弦曲線。
DecelerateInterpolator：表示在動畫開始的地方快而後慢。
LinearInterpolator：表示以常量速率改變。

咱們能夠經過一些示例加深對這幾個插入器的瞭解。數組

具體可查看官方文檔：http://developer.android.com/reference/android/view/animation/package-summary.html，這裏再也不詳述。安全

先來了解下MainActivity中的代碼，以下所示： app

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變成叉號，經過以下的動畫： ide

　再次點擊則向左旋轉還原，將上面的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;
    }

    /**

百搜技術網:http://www.baisoujs.com * 開始顯示動畫效果
     * @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, 
F,yOffset + mlp.bottomMargin, 0F));
    }

    @Override
    protected void addEnlargeAnimation(View[] views) {
        // TODO Auto-generated method stub
        MarginLayoutParams mlp = (MarginLayoutParams) views[0].
                getLayoutParams();
        addAnimation(new TranslateAnimation(
F, xOffset + -mlp.leftMargin, 
F,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.baisoujs.com/detail_137434192639788.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。