Android属性动画——实现灵动菜单效果

最新推荐文章于 2024-08-19 10:00:32 发布
最新推荐文章于 2024-08-19 10:00:32 发布
阅读量4.3k 收藏 17
点赞数 3
分类专栏： Android 文章标签： android 属性动画 灵动菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25193681/article/details/51910984
版权

前段时间，我学习了自定义View，基本能够绘制一些比较好看的控件，那么今天开始，我将会学习属性动画。前面我也简单的看过属性动画的概念，然后也是看了一下效果，了解了一些基本概念，比如Animator、ObjectAnimator、插值器等等。为此我还特意写了博客Android技术进阶的要素——Android属性动画，但是没有一个项目去巩固，也一直耿耿于怀，今天终于可以开始写这方面的程序了，好了，讲了这么多的废话，下面开始看看今天的内容，我是通过demo来了解属性动画的。先看你效果：

这里写图片描述

这个就是展开后的效果了，由于不是动态图，所以看不到全部效果，我简单的描述一下，当点击中间的“”+“的时候，会从“+”处灵动的弹出三个按钮，这三个按钮的出现过程中，也带有动画效果，同样的，关闭也是如此，同样的，这三个按钮也同样的注册了点击事件。

接下来，我们开始编码，因为这个菜单是以一个整体的形式展现出来的，所以，我这里是把这个控件当成一个ViewGroup来实现，

新建一个类，名字叫MMenu，继承自RelativeLayout，并且实现了点击事件的接口，下面看看我们这一次所用到的变量：

    private ImageView center,home,call,hyperlink;

    private List<ImageView> oViews;

    private boolean mFlag=true;

    private float mHiddenViewMeasuredHeight;

不多，首先是有四个图片控件、然后是一个list集合，用于装载Imageview，下面的一个标志，是用来区分打开或者关闭菜单栏，再一个就是动画的位移长度。

下面开始初始化操作：

    private void initView(Context context) {

        LayoutInflater.from(context).inflate(R.layout.menu_layout, this);
        center=(ImageView) findViewById(R.id.center);
        call=(ImageView) findViewById(R.id.call);
        home=(ImageView) findViewById(R.id.home);
        hyperlink=(ImageView) findViewById(R.id.hyperlink);

        //将四个Imageview放在集合里，方便管理
        oViews=new ArrayList<ImageView>();
        oViews.add(center);
        oViews.add(call);
        oViews.add(home);
        oViews.add(hyperlink);

        center.setOnClickListener(this);
        call.setOnClickListener(this);
        home.setOnClickListener(this);
        hyperlink.setOnClickListener(this);
    }

这里加载了布局文件、然后引入了控件、设置了点击事件等等。接下来在onSizeChanged方法里面给位移的大小赋值，代码如下：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mHiddenViewMeasuredHeight = (int) (w*1/12);
        Anim(mHiddenViewMeasuredHeight,-mHiddenViewMeasuredHeight ,0.5f, 1f, 0f, 90f);

    }

这里我们一开始设置对菜单进行关闭。下面开始主要代码，对控件的动画效果进行一个操作，代码如下:


    private void Anim(float mHiddenViewMeasuredHeightBegin,float mHiddenViewMeasuredHeightyClose,float x,float y,float anglex,float angley){

        //设置动画。用于弹出和收回
        ObjectAnimator animator0=ObjectAnimator.ofFloat(oViews.get(0), "alpha", x,y);

        ObjectAnimator animator1=ObjectAnimator.ofFloat(oViews.get(1), "translationX",mHiddenViewMeasuredHeightBegin);

        ObjectAnimator animator2=ObjectAnimator.ofFloat(oViews.get(2), "translationY",mHiddenViewMeasuredHeightBegin);

        ObjectAnimator animator3=ObjectAnimator.ofFloat(oViews.get(3), "translationX",mHiddenViewMeasuredHeightyClose);



        //设置动画，用于旋转效果
        ObjectAnimator animator4=ObjectAnimator.ofFloat(oViews.get(0), "rotation", anglex,120f,angley);

        ObjectAnimator animator5=ObjectAnimator.ofFloat(oViews.get(1), "rotationX", anglex,120f,angley);

        ObjectAnimator animator6=ObjectAnimator.ofFloat(oViews.get(2), "rotationY", anglex,120f,angley);

        ObjectAnimator animator7=ObjectAnimator.ofFloat(oViews.get(3), "rotationX", anglex,120f,angley);

        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new OvershootInterpolator());
        set.playTogether(animator0,animator1,animator2,animator3,animator4,animator5,animator6,animator7);
        set.start();


    }

注释也是比较详细，这里定义个多个控件属性，并且还用到了集合容器，整个的动画效果就是在这里实现的，对于新手而言，这里面的效果很微妙，所以要自己多运行细细体会。

然后就是对面暴露一个点击事件，用于事件的回调，

    //设置事件回调
    public void setonMenuClickListener( onMenuClickListener listener){
        this.listener=listener;
    }

这是这个控件的主要代码，接下来我附上所有的代码：

布局文件：

menu_layout.xml



主页面的布局文件，main.xml:


接下来是主界面代码，Main.java

/**
* 小瓶盖 2016年7月14日16:30:36
*
* @author Android属性动画——实现灵动菜单效果
*
*相关博客地址 http://blog.csdn.net/qq_25193681
*/
public class Main extends Activity {

private MMenu menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);



    menu=(MMenu) findViewById(R.id.MMenu);
    menu.setonMenuClickListener(new onMenuClickListener() {
        @Override
        public void hyperlink() {
            Toast.makeText(Main.this, "点击了hyperlink", 0).show();
        }
        @Override
        public void Home() {
            Toast.makeText(Main.this, "点击了home", 0).show();
        }
        @Override
        public void Call() {
            Toast.makeText(Main.this, "点击了Call", 0).show();
        }
    });
}

}


MMenu.java

/**
* 小瓶盖 2016年7月14日16:30:36
*
* @author Android属性动画——实现灵动菜单效果
*
*相关博客地址 http://blog.csdn.net/qq_25193681
*/
public class MMenu extends RelativeLayout implements OnClickListener{

private ImageView center,home,call,hyperlink;

private List<ImageView> oViews;

private boolean mFlag=true;

private float mHiddenViewMeasuredHeight;



public MMenu(Context context, AttributeSet attrs) {
    super(context, attrs);
    initView(context);
}

public MMenu(Context context) {
    super(context);
    initView(context);
}

private void initView(Context context) {

    LayoutInflater.from(context).inflate(R.layout.menu_layout, this);
    center=(ImageView) findViewById(R.id.center);
    call=(ImageView) findViewById(R.id.call);
    home=(ImageView) findViewById(R.id.home);
    hyperlink=(ImageView) findViewById(R.id.hyperlink);

    //将四个Imageview放在集合里，方便管理
    oViews=new ArrayList<ImageView>();
    oViews.add(center);
    oViews.add(call);
    oViews.add(home);
    oViews.add(hyperlink);

    center.setOnClickListener(this);
    call.setOnClickListener(this);
    home.setOnClickListener(this);
    hyperlink.setOnClickListener(this);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mHiddenViewMeasuredHeight = (int) (w*1/12);
    Anim(mHiddenViewMeasuredHeight,-mHiddenViewMeasuredHeight ,0.5f, 1f, 0f, 90f);

}

@Override
public void onClick(View v) {
    switch (v.getId()) {
    case R.id.center:
        if (mFlag) {
            Anim(-mHiddenViewMeasuredHeight,mHiddenViewMeasuredHeight, 1f, 0.5f, 90f, 0f);;
            mFlag=false;
        }else {
            Anim(mHiddenViewMeasuredHeight, -mHiddenViewMeasuredHeight,0.5f, 1f, 0f, 90f);
            mFlag=true;
        }
        break;
    case R.id.home:
        if (listener!=null) {
            listener.Home();
        }
        break;
    case R.id.call:
        if (listener!=null) {
            listener.Call();
        }
        break;

    case R.id.hyperlink:
        if (listener!=null) {
            listener.hyperlink();
        }
        break;

    default:
        break;
    }
}


private void Anim(float mHiddenViewMeasuredHeightBegin,float mHiddenViewMeasuredHeightyClose,float x,float y,float anglex,float angley){

    //设置动画。用于弹出和收回
    ObjectAnimator animator0=ObjectAnimator.ofFloat(oViews.get(0), "alpha", x,y);

    ObjectAnimator animator1=ObjectAnimator.ofFloat(oViews.get(1), "translationX",mHiddenViewMeasuredHeightBegin);

    ObjectAnimator animator2=ObjectAnimator.ofFloat(oViews.get(2), "translationY",mHiddenViewMeasuredHeightBegin);

    ObjectAnimator animator3=ObjectAnimator.ofFloat(oViews.get(3), "translationX",mHiddenViewMeasuredHeightyClose);



    //设置动画，用于旋转效果
    ObjectAnimator animator4=ObjectAnimator.ofFloat(oViews.get(0), "rotation", anglex,120f,angley);

    ObjectAnimator animator5=ObjectAnimator.ofFloat(oViews.get(1), "rotationX", anglex,120f,angley);

    ObjectAnimator animator6=ObjectAnimator.ofFloat(oViews.get(2), "rotationY", anglex,120f,angley);

    ObjectAnimator animator7=ObjectAnimator.ofFloat(oViews.get(3), "rotationX", anglex,120f,angley);

    AnimatorSet set = new AnimatorSet();
    set.setDuration(500);
    set.setInterpolator(new OvershootInterpolator());
    set.playTogether(animator0,animator1,animator2,animator3,animator4,animator5,animator6,animator7);
    set.start();


}
onMenuClickListener listener;
//设置事件回调
public void setonMenuClickListener( onMenuClickListener listener){
    this.listener=listener;
}

}

还有一个接口，用于实现回调事件：

/**
* 小瓶盖 2016年7月14日16:30:36
*
* @author Android属性动画——实现灵动菜单效果
*
*相关博客地址 http://blog.csdn.net/qq_25193681
*/
public interface onMenuClickListener {
void Home();
void Call();
void hyperlink();
}

“`
所有的代码都在这里了，因为我自己也是刚刚接触，所以博客可能有很多的瑕疵，也请各位同僚批评指出。

最后我贴出源码

小瓶盖_tl
关注
专栏目录
android 菜单打开动画
liwei123liwei123的博客
07-22 345
<FrameLayout android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_width="match_p...
android+酷炫动画效果,Android酷炫动画效果之3D星体旋转效果
weixin_31531599的博客
05-25 2222
在Android中，如果想要实现3D动画效果一般有两种选择：一是使用Open GL ES，二是使用Camera。Open GL ES使用起来太过复杂，一般是用于比较高级的3D特效或游戏，并且这个也不是开源的，像比较简单的一些3D效果，使用Camera就足够了。一些熟知的Android 3D动画如对某个View进行旋转或翻转的 Rotate3dAnimation类，还有使用Gallery( Gall...
android菜单展开的动画效果
08-08
见博客:http://blog.csdn.net/baidu_nod/article/details/38404531
android做一个点击菜单弹出来的动画
08-06
android做一个点击菜单弹出来的动画,多种动画组合的效果
推荐项目：Android 动态菜单项
最新发布
gitblog_00038的博客
08-19 766
推荐项目：Android 动态菜单项 android-animated-menu-itemsThe example Android project of animated menu items in toolbar项目地址:https://gitcode.com/gh_mirrors/an/android-animated-menu-items 在移动应用设计领域，引人注目的交互体验是留住用户的...
浅谈属性动画简单使用之实现卫星菜单(二)
Mikyou的专栏
03-28 2352
大家对于卫星菜单应该都不陌生了,但是很多人
Android使用属性动画property animation，实现分散式弹出菜单
laxian2009的专栏
09-24 2943
Android提供了多种动画类型，有View Animation 、Drawable Animation 、Property Animation 。 View Animation只能支持简单的缩放、平移、旋转、透明度基本的动画，且有一定的局限性。比如动画结束后，如果View的位置改变，而他的事件监听还在移动前的位置，这不是我们想要的。 很多App都有很炫酷的动画效果，其实实现并不难，下面是一个点
android自定义炫酷UI-灵动的锦鲤
04-14
通过自定义android高级UI实现了一种类似小鱼游泳的炫酷效果，自定义drawable、自定义layout、属性动画的使用、点击事件的处理、水波纹效果、贝塞尔曲线的使用等等，实现的小鱼不仅会动，还能根据鼠标点击的位置进行...
灵动系列第一卷——简约线条创意动画ppt模板.rar
09-09
"灵动系列第一卷——简约线条创意动画ppt模板"是一个专为提升演示效果而设计的专业资源，由“林敏ppt设计工作室”精心打造。这款模板以其独特的设计理念和创新的动画效果，旨在帮助用户快速创建引人入胜的演示内容。...
安卓灵动菜单展开效果
02-29
在实现灵动菜单时，通常会创建自定义的ViewGroup，如DrawerLayout或ScrollView，来承载菜单项并实现动画效果。 2. **布局文件**： 在XML布局文件中，开发者需要定义菜单项的布局，这通常包括ImageView（图标）和...
android按钮菜单（动画展开关闭）
08-07
点击按钮动态展开和关闭菜单，可以根据需求设置展开方向
Android 阶梯式展开菜单特效 源码
10-11
ToggleExpandLayout 一个页面展示特效，点击展开按钮后呈现阶梯式的叠加出现， 点击关闭按钮，从下到上一一缩小收回，根据SwitchButton点击监听setOnToggleTouchListener 的onOpen（）方法然后对每一个View设置 view.setElevation(dp2px(1));当关闭的时候onStartClose（） 再次对每一个view设置原始高度 View view = layout.getChildAt(i); view.setElevation(dp2px(i));
自定义菜单收起展开动画
05-05
自定义菜单收起展开动画
Android属性动画与自定义View——实现vivo x6更新系统的动画效果
07-17
相关博客http://blog.csdn.net/qq_25193681/article/details/51910984
Android菜单(动画菜单、360波纹菜单)
曦笑大海的博客
03-09 854
前言：android菜单集合：FragmentTabHost系统菜单、上移式菜单、360波纹菜单、展开式菜单。详解注释，可直接拿来用！ 效果：             开发环境：AndroidStudio2.1.2 部分代码(Activity) public class NormalActivity extends AppCompatActivity {
android菜单动画
vision的专栏
11-09 595
今天学习了一个挺有意思的动画效果，这里的菜单并不是按机器上的 MENU 出现在那种菜单，而是基于Android SDK 提供的 android.view.animation.TranslateAnimation（extends android.view.animation.Animation）类实例后附加到一个 Layout 上使之产生的有动画出现和隐藏效果的菜单。 原理：Layout（菜单）从
android菜单动画,Android超简单实现动画悬浮菜单
weixin_33891343的博客
05-25 327
目录image效果展示image代码展示class AnimMenuActivity : AppCompatActivity(){private var isOpen = false //菜单是否打开private var menuArray = ArrayList()override fun onCreate(savedInstanceState: Bundle?) {super.onCreat...
android自定义菜单动画,Android自定义View展开菜单功能的实现
weixin_32848617的博客
05-25 165
先给大家展示下效果图，如果大家感觉不错，请参考实现代码。思路1.下角button的父view加入一个framelayout，也就是图中全屏透明灰色部分。菜单没有弹出的时候设置为不可见。设置framelayout点击事件，点击的时候缩回菜单。对应init()2.ramelayout中加入菜单按钮，也就是弹出的那三个。菜单没有弹出的时候设置为不可见。对应addelement()和freshelemen...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值