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);
8. //DroidGap.this.root.addView(view);
10. System.out.println("加載完成");
11. Animation translate_in=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_in);
14. translate_in.setFillAfter(true);
15. translate_in.setDuration(1000);
16. translate_in.setDetachWallpaper(true);
17. // translate_in.
18. view.setAnimation(translate_in);
22. Animation translate_out=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_out);
24. translate_out.setAnimationListener(new AnimationListener(){
26. @Override
27. public void onAnimationEnd(Animation animation) {
28. if(null!=iamgeView){
29. DroidGap.this.root.removeView(iamgeView);
30. iamgeView=null;
31. }
33. }
35. @Override
36. public void onAnimationRepeat(Animation animation) {
37. // TODO Auto-generated method stub
39. }
41. @Override
42. public void onAnimationStart(Animation animation) {
43. // TODO Auto-generated method stub
45. }
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{
57. if(null==iamgeView){
59. iamgeView=new ImageView(DroidGap.this);
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" />
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" />
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的，有問題的話再交流。