Android上webview界面切換效果

大家有沒有遇到過這種需求，使用Android上的webview控件時需要跳轉到下一個html時，要求當前界面緩緩的向左移動，下一個html界面緩緩的從右邊出現。

這是當時在公司做基於phonegap的項目時用到的，在extends WebChromeClient的類中實現的方法裡加上如下代碼：

1. @Override  
2.         public void onProgressChanged(WebView view, int newProgress) {  
3.             if(newProgress==100){  
4.                 if(iamgeView!=null)  
5.                 iamgeView.setVisibility(View.GONE);  
6.                 //view.setVisibility(View.VISIBLE);   
7.               
8.                 //DroidGap.this.root.addView(view);   
9.               
10.                 System.out.println("加載完成");  
11.                 Animation translate_in=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_in);  
12.                   
13.                   
14.                 translate_in.setFillAfter(true);  
15.                 translate_in.setDuration(1000);  
16.                 translate_in.setDetachWallpaper(true);  
17.             //  translate_in.   
18.                 view.setAnimation(translate_in);   
19.                   
20.                   
21.                   
22.     Animation translate_out=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_out);  
23.                   
24.     translate_out.setAnimationListener(new AnimationListener(){  
25.   
26.         @Override  
27.         public void onAnimationEnd(Animation animation) {  
28.             if(null!=iamgeView){  
29.                 DroidGap.this.root.removeView(iamgeView);  
30.                 iamgeView=null;  
31.             }  
32.               
33.         }  
34.   
35.         @Override  
36.         public void onAnimationRepeat(Animation animation) {  
37.             // TODO Auto-generated method stub   
38.               
39.         }  
40.   
41.         @Override  
42.         public void onAnimationStart(Animation animation) {  
43.             // TODO Auto-generated method stub   
44.               
45.         }  
46.           
47.     });  
48.     translate_out.setFillAfter(true);  
49.     translate_out.setDuration(1000);  
50.     translate_out.setDetachWallpaper(true);  
51.             //  translate_in.   
52.     if(null!=iamgeView){  
53.         iamgeView.setAnimation(translate_out);   
54.     }             
55.             }else{  
56.                   
57.                 if(null==iamgeView){  
58.                       
59.                     iamgeView=new ImageView(DroidGap.this);  
60.   
61.                     view.setDrawingCacheEnabled(true);  
62.                     Bitmap bitmap=view.getDrawingCache();  
63.                     if(null!=bitmap){  
64.                         Bitmap b=   Bitmap.createBitmap(bitmap);  
65.                         iamgeView.setImageBitmap(b);  
66.                     }  
67.                             DroidGap.this.root.addView(iamgeView);  
68.                 }  
69.                 }  
70.             super.onProgressChanged(view, newProgress);  
71.         }  

iamgeView：自己定義的ImageView控件。

R.drawable.translate_in：進入的translate動畫，

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
3.      <translate android:fromXDelta="100%" android:toXDelta="0%p"    
4.             android:duration="100" />    
5.       
6. </set>  

R.drawable.translate_out：出的translate動畫，

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.      <translate android:fromXDelta="0%" android:toXDelta="-100%p"    
4.             android:duration="100" />    
5.       
6. </set>  

該代碼詳細描述：在onProgressChanged方法中，首先判定是否加載進度是否到100，

在沒有執行完的情況下，先去new ImageView對象，iamgeView=new ImageView(DroidGap.this);

然後進行設置view.setDrawingCacheEnabled(true);很重要的一句話，

為了下面能夠對webview界面截取圖片，即 Bitmap bitmap=view.getDrawingCache();

然後添加到當前的Linearlayout布局中即DroidGap.this.root.addView(iamgeView);

如果下面的頁面加載完成了，就執行進入動畫，即view.setAnimation(translate_in);

同時對該Imageview執行out動畫，並且在動畫的監聽的結束時執行

DroidGap.this.root.removeView(iamgeView);即清除掉當前生成的屏幕截圖。

iamgeView=null;

第一次寫，因為是一個小功能模塊，這裡大家可以放到自己的項目裡試一下，主要代碼就這麼多，OK的，有問題的話再交流。