Android實現(xiàn)毛玻璃效果彈出菜單動畫

更新時間：2022年08月10日 10:08:12 作者：lvshaorong

這篇文章主要為大家詳細介紹了Android實現(xiàn)毛玻璃效果彈出菜單動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)毛玻璃效果彈出菜單動畫的具體代碼，供大家參考，具體內(nèi)容如下

仿ios上屏幕下方向上滑出來的一個模糊菜單，效果如下

原理很簡單，頁面上原來有一個gone的framelayout，調(diào)用方法讓它彈出的時候加了一個位移動畫，讓它從底部出來，出來的時候給這個framelayout里的一個imageView設(shè)置一個模糊后的截屏圖片，并且這個圖片也加一個相同時間的反方向位移動畫，這個demo里用到的Blur模糊類和自定義imageView可以去我前兩篇博客上找到.

這里面用的控件的大小等全部是動態(tài)計算的，不必擔(dān)心屏幕適配的問題

activity的布局如下

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
? ? xmlns:tools="http://schemas.android.com/tools"
? ? android:id="@+id/window"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent"
? ? tools:context="com.npi.blureffect.DialogActivity" >
?
? ? <TextView
? ? ? ? android:id="@+id/textView1"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:text="@string/hello_world" />
? ? ?<RatingBar
? ? ? ? android:id="@+id/ratingBar1"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignLeft="@+id/textView1"
? ? ? ? android:layout_below="@+id/textView1"
? ? ? ? android:layout_marginTop="124dp" />
?
? ? <Switch
? ? ? ? android:id="@+id/switch1"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignLeft="@+id/ratingBar1"
? ? ? ? android:layout_below="@+id/ratingBar1"
? ? ? ? android:layout_marginLeft="24dp"
? ? ? ? android:layout_marginTop="81dp"
? ? ? ? android:text="Switch" />
?
? ? <Button
? ? ? ? android:id="@+id/button1"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignRight="@+id/ratingBar1"
? ? ? ? android:layout_below="@+id/ratingBar1"
? ? ? ? android:text="Button" />
?
? ? <Button
? ? ? ? android:id="@+id/button2"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignBottom="@+id/ratingBar1"
? ? ? ? android:layout_alignLeft="@+id/switch1"
? ? ? ? android:layout_marginBottom="52dp"
? ? ? ? android:text="Button" />
?
? ? <TextView
? ? ? ? android:id="@+id/textView2"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignBottom="@+id/button1"
? ? ? ? android:layout_alignLeft="@+id/ratingBar1"
? ? ? ? android:text="Large Text"
? ? ? ? android:textAppearance="?android:attr/textAppearanceLarge" />
?
? ? <ProgressBar
? ? ? ? android:id="@+id/progressBar1"
? ? ? ? style="?android:attr/progressBarStyleHorizontal"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignParentBottom="true"
? ? ? ? android:layout_marginBottom="49dp"
? ? ? ? android:layout_toLeftOf="@+id/button1" />
?
? ? <ProgressBar
? ? ? ? android:id="@+id/progressBar2"
? ? ? ? style="?android:attr/progressBarStyleLarge"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_below="@+id/switch1"
? ? ? ? android:layout_toRightOf="@+id/switch1" />
?
? ? <RadioButton
? ? ? ? android:id="@+id/radioButton1"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_above="@+id/progressBar1"
? ? ? ? android:layout_alignLeft="@+id/switch1"
? ? ? ? android:text="RadioButton" />
?
? ? <Button
? ? ? ? android:id="@+id/button3"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:layout_alignLeft="@+id/progressBar2"
? ? ? ? android:layout_below="@+id/progressBar2"
? ? ? ? android:text="Button" />
?
? ? <FrameLayout
? ? ? ? android:id="@+id/bottom_menu"
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="200dp"
? ? ? ? android:layout_alignParentBottom="true"
? ? ? ? android:layout_alignParentLeft="true"
? ? ? ? android:layout_alignParentRight="true"
? ? ? ? android:background="#eeeeee"
? ? ? ? android:visibility="gone" >
?
? ? ? ? <com.npi.blureffect.ScrollableImageView
? ? ? ? ? ? android:id="@+id/bottom_back"
? ? ? ? ? ? android:layout_width="match_parent"
? ? ? ? ? ? android:layout_height="match_parent"
? ? ? ? ? ? android:src="@drawable/abs__ab_share_pack_holo_light" />
?
? ? ? ? <LinearLayout
? ? ? ? ? ? android:layout_width="match_parent"
? ? ? ? ? ? android:layout_height="wrap_content" >
?
? ? ? ? ? ? <ImageView
? ? ? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? ? ? android:src="@drawable/abs__ic_voice_search" />
?
? ? ? ? ? ? <ImageView
? ? ? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? ? ? android:src="@drawable/abs__ic_voice_search" />
?
? ? ? ? ? ? <ImageView
? ? ? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? ? ? android:src="@drawable/abs__ic_voice_search" />
?
? ? ? ? ? ? <ImageView
? ? ? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? ? ? android:layout_weight="1"
? ? ? ? ? ? ? ? android:src="@drawable/abs__ic_voice_search" />
?
? ? ? ? </LinearLayout>
?
? ? </FrameLayout>
?
? ? <ImageView
? ? ? ? android:id="@+id/background"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent"
? ? ? ? android:background="#fff"
? ? ? ? android:visibility="gone" />
?
</RelativeLayout>

activity如下

package com.npi.blureffect;
?
import java.util.TimerTask;
?
?
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;
?
public class DialogActivity extends Activity {
TextView textView1;
RelativeLayout window;
ImageView background;
FrameLayout bottomMenu;
Button button2;
Button button1;
ScrollableImageView bottomBack;
?? ?@Override
?? ?protected void onCreate(Bundle savedInstanceState) {
?? ??? ?super.onCreate(savedInstanceState);
?? ??? ?setContentView(R.layout.activity_dialog);
?? ??? ?textView1 = (TextView) findViewById(R.id.textView1);
?? ??? ?window = (RelativeLayout)findViewById(R.id.window);
?? ??? ?background = (ImageView) findViewById(R.id.background);
?? ??? ?bottomMenu = (FrameLayout) findViewById(R.id.bottom_menu);
?? ??? ?button2 = (Button) findViewById(R.id.button2);
?? ??? ?bottomBack = (ScrollableImageView) findViewById(R.id.bottom_back);
?? ??? ?button1 = (Button) findViewById(R.id.button1);
?? ??? ?button2.setOnClickListener(new OnClickListener() {
?? ??? ??? ?
?? ??? ??? ?@Override
?? ??? ??? ?public void onClick(View v) {
?? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ?showBottomMenu(window,500);
?? ??? ??? ?}
?? ??? ?});
?? ??? ?button1.setOnClickListener(new OnClickListener() {
?? ??? ??? ?
?? ??? ??? ?@Override
?? ??? ??? ?public void onClick(View v) {
?? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ?hideBottomMenu(window, 500);
?? ??? ??? ?}
?? ??? ?});
?? ?}
?
? ?public void showBottomMenu(View layout,final int duration){
?? ? //對當(dāng)前頁面進行截屏
?? ? ?? ??? ?layout.setDrawingCacheEnabled(true); ?
?? ? ?? ??? ?layout.buildDrawingCache(); ?//啟用DrawingCache并創(chuàng)建位圖 ?
?? ? ?? ??? ?Bitmap screen = Bitmap.createBitmap(layout.getDrawingCache()); //創(chuàng)建一個DrawingCache的拷貝，因為DrawingCache得到的位圖在禁用后會被回收 ?
?? ? ?? ??? ?layout.setDrawingCacheEnabled(false); ?//禁用DrawingCahce否則會影響性能 ?
?? ? ? ? ?? ?
?? ? ?? ??? ?//將截屏進行模糊
?? ? ?? ??? ?screen = Blur.fastblur(this, screen, 10);
?? ? ?? ??? ?bottomBack.setoriginalImage(screen);
?? ? ?? ??? ?
?? ? ?? ??? ?
?? ? ? bottomMenu.setAlpha(0);//在動畫開啟之后再可見，否則會有殘影
?? ? ? bottomMenu.setVisibility(View.VISIBLE);
?? ? ? bottomMenu.post(new Runnable() {
?? ??? ?
?? ??? ?@Override
?? ??? ?public void run() {
?? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ?Animation animation = new TranslateAnimation(0, 0, bottomMenu.getHeight(), 0);//這里彈出框的高度的dp需要事先寫死
?? ??? ??? ?bottomBack.handleScroll(bottomBack.getOriginalImage().getHeight()-bottomMenu.getHeight(), 0);
?? ??? ??? ?Animation backgroundAnimation = new TranslateAnimation(0,0,-bottomBack.getHeight(),0);
?? ??? ??? ?backgroundAnimation.setDuration(duration);
?? ??? ??? ?bottomBack.startAnimation(backgroundAnimation);
?? ??? ??? ?animation.setAnimationListener(new AnimationListener() {
?? ??? ??? ??? ?
?? ??? ??? ??? ?@Override
?? ??? ??? ??? ?public void onAnimationStart(Animation animation) {
?? ??? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ??? ?bottomMenu.setAlpha(255);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?@Override
?? ??? ??? ??? ?public void onAnimationRepeat(Animation animation) {
?? ??? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?@Override
?? ??? ??? ??? ?public void onAnimationEnd(Animation animation) {
?? ??? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ??? ?animation.setDuration(duration);
?? ??? ??? ?bottomMenu.startAnimation(animation);
?? ??? ?}
?? ?});
? ?}
? ?
? ?
? ?public void hideBottomMenu(View layout,final int duration){
?? ??? ? //對當(dāng)前頁面進行截屏
?? ??? ? ?? ??? ?layout.setDrawingCacheEnabled(true); ?
?? ??? ? ?? ??? ?layout.buildDrawingCache(); ?//啟用DrawingCache并創(chuàng)建位圖 ?
?? ??? ? ?? ??? ?Bitmap screen = Bitmap.createBitmap(layout.getDrawingCache()); //創(chuàng)建一個DrawingCache的拷貝，因為DrawingCache得到的位圖在禁用后會被回收 ?
?? ??? ? ?? ??? ?layout.setDrawingCacheEnabled(false); ?//禁用DrawingCahce否則會影響性能 ?
?? ??? ? ? ? ?? ?
?? ??? ? ?? ??? ?//將截屏進行模糊
?? ??? ? ?? ??? ?screen = Blur.fastblur(this, screen, 10);
?? ??? ? ?? ??? ?bottomBack.setoriginalImage(screen);
?? ??? ? ?? ??? ?
?? ??? ? ?? ??? ?
?? ??? ? ??
?? ??? ? ? bottomMenu.post(new Runnable() {
?? ??? ??? ?
?? ??? ??? ?@Override
?? ??? ??? ?public void run() {
?? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ?Animation animation = new TranslateAnimation(0, 0, 0, +bottomMenu.getHeight());//這里彈出框的高度的dp需要事先寫死
?? ??? ??? ??? ?bottomBack.handleScroll(bottomBack.getOriginalImage().getHeight()-bottomMenu.getHeight(), 0);
?? ??? ??? ??? ?Animation backgroundAnimation = new TranslateAnimation(0,0,0,-bottomBack.getHeight());
?? ??? ??? ??? ?backgroundAnimation.setDuration(duration);
?? ??? ??? ??? ?bottomBack.startAnimation(backgroundAnimation);
?? ??? ??? ??? ?animation.setAnimationListener(new AnimationListener() {
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?@Override
?? ??? ??? ??? ??? ?public void onAnimationStart(Animation animation) {
?? ??? ??? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ??? ??? ?bottomMenu.setAlpha(255);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?@Override
?? ??? ??? ??? ??? ?public void onAnimationRepeat(Animation animation) {
?? ??? ??? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?@Override
?? ??? ??? ??? ??? ?public void onAnimationEnd(Animation animation) {
?? ??? ??? ??? ??? ??? ?// TODO Auto-generated method stub
?? ??? ??? ??? ??? ??? ?bottomMenu.setVisibility(View.GONE);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ??? ?animation.setDuration(duration);
?? ??? ??? ??? ?bottomMenu.startAnimation(animation);
?? ??? ??? ?}
?? ??? ?});
?? ? ? }
? ?
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: