Android仿微博菜单弹出效果

最新推荐文章于 2018-06-24 19:48:06 发布
最新推荐文章于 2018-06-24 19:48:06 发布
阅读量480 收藏
点赞数
分类专栏： 动画特效 文章标签： 移动开发 java
先上效果图，这个截图不是很流畅，大家可以下载apk试一下。

[img]http://dl2.iteye.com/upload/attachment/0107/2720/8c357950-f08d-3f06-addc-b3e2b6612f23.gif[/img]

说一下实现思路：
1、截取当前窗口，对图片做高斯模糊处理，将处理后的图片做popupwindow的背景图片；
2、创建popupwindow，完成布局，这儿要注意：View的移动范围是由parent的大小决定的，就是只能在parent的范围内移动；
3、给买个View添加进入动画，每个比前一个延期50ms播放动画，关闭窗口时相反；
4、为View的动画添加回弹插值器；

关于动画说明参考：http://gqdy365.iteye.com/blog/2194297
关于截屏并高斯模糊参考：http://gqdy365.iteye.com/blog/2193913

MoreWindow.java窗口 

package com.jerome.weibo;

import android.animation.Animator;
import android.animation.Animator.AnimatorListener;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Handler;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;

public class MoreWindow extends PopupWindow implements OnClickListener{

	private String TAG = MoreWindow.class.getSimpleName();
	Activity mContext;
	private int mWidth;
	private int mHeight;
	private int statusBarHeight ;
	private Bitmap mBitmap= null;
	private Bitmap overlay = null;

	private Handler mHandler = new Handler();

	public MoreWindow(Activity context) {
		mContext = context;
	}

	public void init() {
		Rect frame = new Rect();
		mContext.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
		statusBarHeight = frame.top;
		DisplayMetrics metrics = new DisplayMetrics();
		mContext.getWindowManager().getDefaultDisplay()
				.getMetrics(metrics);
		mWidth = metrics.widthPixels;
		mHeight = metrics.heightPixels;

		setWidth(mWidth);
		setHeight(mHeight);
	}

	private Bitmap blur() {
		if (null != overlay) {
			return overlay;
		}
		long startMs = System.currentTimeMillis();

		View view = mContext.getWindow().getDecorView();
		view.setDrawingCacheEnabled(true);
		view.buildDrawingCache(true);
		mBitmap = view.getDrawingCache();

		float scaleFactor = 8;//图片缩放比例；
		float radius = 10;//模糊程度
		int width = mBitmap.getWidth();
		int height =  mBitmap.getHeight();

		overlay = Bitmap.createBitmap((int) (width / scaleFactor),(int) (height / scaleFactor),Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(overlay);
		canvas.scale(1 / scaleFactor, 1 / scaleFactor);
		Paint paint = new Paint();
		paint.setFlags(Paint.FILTER_BITMAP_FLAG);
		canvas.drawBitmap(mBitmap, 0, 0, paint);

		overlay = FastBlur.doBlur(overlay, (int) radius, true);
		Log.i(TAG, "blur time is:"+(System.currentTimeMillis() - startMs));
		return overlay;
	}

	private Animation showAnimation1(final View view,int fromY ,int toY) {
		AnimationSet set = new AnimationSet(true);
		TranslateAnimation go = new TranslateAnimation(0, 0, fromY, toY);
		go.setDuration(300);
		TranslateAnimation go1 = new TranslateAnimation(0, 0, -10, 2);
		go1.setDuration(100);
		go1.setStartOffset(250);
		set.addAnimation(go1);
		set.addAnimation(go);

		set.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationEnd(Animation animation) {
			}

			@Override
			public void onAnimationRepeat(Animation animation) {

			}

			@Override
			public void onAnimationStart(Animation animation) {

			}

		});
		return set;
	}


	public void showMoreWindow(View anchor,int bottomMargin) {
		final RelativeLayout layout = (RelativeLayout)LayoutInflater.from(mContext).inflate(R.layout.center_music_more_window, null);
		setContentView(layout);

		ImageView close= (ImageView)layout.findViewById(R.id.center_music_window_close);
		android.widget.RelativeLayout.LayoutParams params =new android.widget.RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
		params.bottomMargin = bottomMargin;
		params.addRule(RelativeLayout.BELOW, R.id.more_window_auto);
		params.addRule(RelativeLayout.RIGHT_OF, R.id.more_window_collect);
		params.topMargin = 200;
		params.leftMargin = 18;
		close.setLayoutParams(params);

		close.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if (isShowing()) {
					closeAnimation(layout);
				}
			}

		});

		showAnimation(layout);
		setBackgroundDrawable(new BitmapDrawable(mContext.getResources(), blur()));
		setOutsideTouchable(true);
		setFocusable(true);
		showAtLocation(anchor, Gravity.BOTTOM, 0, statusBarHeight);
	}

	private void showAnimation(ViewGroup layout){
		for(int i=0;i<layout.getChildCount();i++){
			final View child = layout.getChildAt(i);
			if(child.getId() == R.id.center_music_window_close){
				continue;
			}
			child.setOnClickListener(this);
			child.setVisibility(View.INVISIBLE);
			mHandler.postDelayed(new Runnable() {

				@Override
				public void run() {
					child.setVisibility(View.VISIBLE);
					ValueAnimator fadeAnim = ObjectAnimator.ofFloat(child, "translationY", 600, 0);
					fadeAnim.setDuration(300);
					KickBackAnimator kickAnimator = new KickBackAnimator();
					kickAnimator.setDuration(150);
					fadeAnim.setEvaluator(kickAnimator);
					fadeAnim.start();
				}
			}, i * 50);
		}

	}

	private void closeAnimation(ViewGroup layout){
		for(int i=0;i<layout.getChildCount();i++){
			final View child = layout.getChildAt(i);
			if(child.getId() == R.id.center_music_window_close){
				continue;
			}
			child.setOnClickListener(this);
			mHandler.postDelayed(new Runnable() {

				@Override
				public void run() {
					child.setVisibility(View.VISIBLE);
					ValueAnimator fadeAnim = ObjectAnimator.ofFloat(child, "translationY", 0, 600);
					fadeAnim.setDuration(200);
					KickBackAnimator kickAnimator = new KickBackAnimator();
					kickAnimator.setDuration(100);
					fadeAnim.setEvaluator(kickAnimator);
					fadeAnim.start();
					fadeAnim.addListener(new AnimatorListener() {

						@Override
						public void onAnimationStart(Animator animation) {
							// TODO Auto-generated method stub

						}

						@Override
						public void onAnimationRepeat(Animator animation) {
							// TODO Auto-generated method stub

						}

						@Override
						public void onAnimationEnd(Animator animation) {
							child.setVisibility(View.INVISIBLE);
						}

						@Override
						public void onAnimationCancel(Animator animation) {
							// TODO Auto-generated method stub

						}
					});
				}
			}, (layout.getChildCount()-i-1) * 30);

			if(child.getId() == R.id.more_window_local){
				mHandler.postDelayed(new Runnable() {

					@Override
					public void run() {
						dismiss();
					}
				}, (layout.getChildCount()-i) * 30 + 80);
			}
		}

	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.more_window_local:
			break;
		case R.id.more_window_online:
			break;
		case R.id.more_window_delete:
			break;
		case R.id.more_window_collect:
			break;
		case R.id.more_window_auto:
			break;
		case R.id.more_window_external:
			break;

		default:
			break;
		}
	}

	public void destroy() {
		if (null != overlay) {
			overlay.recycle();
			overlay = null;
			System.gc();
		}
		if (null != mBitmap) {
			mBitmap.recycle();
			mBitmap = null;
			System.gc();
		}
	}

}




KickBackAnimator.Java回弹效果： 

package com.jerome.weibo;

import android.animation.TypeEvaluator;

public class KickBackAnimator implements TypeEvaluator<Float> {
	private final float s = 1.70158f;
	float mDuration = 0f;

	public void setDuration(float duration) {
		mDuration = duration;
	}

	public Float evaluate(float fraction, Float startValue, Float endValue) {
		float t = mDuration * fraction;
		float b = startValue.floatValue();
		float c = endValue.floatValue() - startValue.floatValue();
		float d = mDuration;
		float result = calculate(t, b, c, d);
		return result;
	}

	public Float calculate(float t, float b, float c, float d) {
		return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
	}
}



代码见github：
https://github.com/gqdy365/WeiboPopupWindow
请大家star一下，我后面会持续更新；

下面是apk下载地址：
iteye_3916
关注
专栏目录
Android 仿新浪微博个人中心的下拉回弹ScrollView源码
09-18
Android 仿新浪微博个人中心，图片背景下拉回弹ScrollView源码
Android仿新浪微博弹出界面动画,Android仿新浪微博个人信息界面及其他效果
weixin_36080653的博客
05-26 299
本教程为大家分享了android微博个人信息界面设计代码，供大家参考，具体内容如下根据用户id获取用户信息接口：如果你已经实现前面的功能那个这个人信息界面便是小菜一碟，此处不作叙述。补充1.时间处理类：处理微博发出时间距现在时刻的时间。应该是比较容易理解的。/*** 时间处理类*/public class dateutils {public string getinterval(string cr...
仿新浪微博加号弹出界面动画
ruancoder的博客
07-11 9833
在使用新浪微博时，通过点击主界面底部的“+”按钮，会弹出一个包含各种按钮操作的界面。 这个界面的用户体验比较酷炫，如中华万年历等app都在使用，首先我们来看一下效果图。 接下来，我们对该页面的动画效果进行分析。 在整个操作流程中，涉及到的动画如下： (1).当面板视图显示时，按钮从屏幕底部进入并附带弹性效果的动画； <translate xmlns:andr
仿新浪微博TAB布局
10-11
完美仿新浪微博TAB布局
Android仿新浪微博首页加号弹出菜单效果
01-06
在Android应用开发中，设计一个类似新浪微博首页加号弹出菜单的效果是一项常见的需求，它可以提供丰富的功能选项，增强用户体验。这个效果通常涉及到自定义View、PopupWindow、动画以及触摸事件的处理等多个Android...
Android仿新浪微博加号弹出界面动画
07-11
Android 仿新浪微博加号弹出界面动画。
Android代码-仿微博、酷安点击加号揭露动画弹出菜单
08-06
PlusMenu 仿微博、酷安点击加号揭露动画弹出菜单 背景模糊效果 截图 没有像酷安那样扩展到导航栏，以后有机会可以再研究吧。 使用的PopupWindow实现的，主要部分有 背景揭露动画；＋ 旋转动画；菜单项弹出动画；背景模糊效果 注意：在gradle中开启renderscript，支持模糊效果（高斯模糊也叫毛玻璃） defaultConfig { applicationId "com.dsy.plusmenu" ... renderscriptTargetApi 25 renderscriptSupportModeEnabled true } 参考项目 https://blog.csdn.net/SilenceOO/article/details/78976477 https://github.com/Manabu-GT/EtsyBlur
android Tab实现（仿新浪微博）
ting
06-21 4105
4.0早就来了，但是大多机型还是2.x，并且tab形式的导航我个人感觉体验很好。 先看效果图 这里几乎是和新浪微博的tab一模一样，就是下面文字要稍稍高出一个像素，怎么都调不好。 反编译发现新浪微博的tab是用TabActivity来实现的。 我个人是很不喜欢使用TabActivity的，主要是因为布局的根标签必须是TabHost，甚至连id都给你指定好了。 所以这里选择
Android实现页面底部仿新浪微博导航栏菜单源码
12-12
Android实现页面底部仿新浪微博导航栏菜单源码
Android 仿微博评论列表固定头部(带刷新).zip
07-03
Android 仿微博评论列表固定头部(带刷新) ，具体可查看图片
安卓开发仿微博@#艾特功能
07-10
仿微博@人名，#话题 功能，获取其中的id，需要按照html格式书写 这个是安卓项目的看清楚了其他相关开发请自己注意
简单仿TabLayout实现个性化Tab，让Tab展现多样化
09-25
简单实现了类似网易新闻客户端Tab栏的效果，详细查看博客http://blog.csdn.net/Iamzgx/article/details/52663783
Android 阶梯式展开菜单特效 源码
10-11
ToggleExpandLayout 一个页面展示特效，点击展开按钮后呈现阶梯式的叠加出现， 点击关闭按钮，从下到上一一缩小收回，根据SwitchButton点击监听setOnToggleTouchListener 的onOpen（）方法然后对每一个View设置 view.setElevation(dp2px(1));当关闭的时候onStartClose（） 再次对每一个view设置原始高度 View view = layout.getChildAt(i); view.setElevation(dp2px(i));
android点击view缓缓出现次级菜单
06-09
使用ValueAnimator实现的android点击view缓缓出现次级菜单。
Android类似微博弹出窗口效果并且点击事件
唯一郭大侠
08-19 1419
最近做一个类似微博的弹出效果，但是自己修改了修改弹出以后的界面样式。可以运用，大家参考即可。 Demo的实现效果是微博的样式，下面有demo的下载地址。而下图显示是我自己写的实现的效果如下图所示： 网络上找的封装好的MoreWindow.class类： package com.kegoal.activity.weibo; import android.animation.Ani
Android底部菜单栏 仿微博效果
10-08
对于初学Android的同学值得一看！会对你有很多大的帮助
Android 技术博客（3）：android 悬浮窗菜单，可用于显示在 launcher 或者 activity。
Aster_tataricus的博客
06-24 3306
Android 技术博客（3）：android 悬浮窗菜单，可用于显示在 launcher 或者 activity。
Android实现微博菜单弹出动画详解与步骤
在Android开发中，实现微博风格的菜单弹出效果是一项常见的交互设计需求。本文档详细介绍了如何在Android应用中模拟微博菜单的弹出体验，这对于提升用户体验和模仿知名应用的界面风格具有参考价值。 首先，作者分享...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值