Android上webview界面切换动画效果

最新推荐文章于 2025-02-11 12:22:04 发布

李峰峰

最新推荐文章于 2025-02-11 12:22:04 发布

阅读量5.6k

点赞数

分类专栏： android 文章标签： android 网页动画切换 webview

本文链接：https://blog.youkuaiyun.com/u013378266/article/details/46592083

版权

android 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在Android的WebView中实现页面切换时的动画效果。通过保存上一页面的快照，结合新的HTML页面，创建动画效果。在onProgressChanged方法中，当加载进度达到100%，截取WebView的图片，将其添加到布局中，再利用动画库执行进入和退出动画，从而实现平滑的界面切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Android上的webview控件时需要跳转到下一个html时，要求当前界面缓缓的向左移动，下一个html界面缓缓的从右边出现。这与常规动画不同，一般方式将无法制作出动画。主要实现方法可以先保存上一个网页的快照，与将要跳转的页面结合起来，制作相关动画。

下面是主要代码：

@Override  
        public void onProgressChanged(WebView view, int newProgress) {  
            if(newProgress==100){  
                if(iamgeView!=null)  
                iamgeView.setVisibility(View.GONE);  
                //view.setVisibility(View.VISIBLE);   
              
                //DroidGap.this.root.addView(view);   
              
                System.out.println("加载完成");  
                Animation translate_in=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_in);  
                  
                  
                translate_in.setFillAfter(true);  
                translate_in.setDuration(1000);  
                translate_in.setDetachWallpaper(true);  
            //  translate_in.   
                view.setAnimation(translate_in);   
                  
                  
                  
    Animation translate_out=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_out);  
                  
    translate_out.setAnimationListener(new AnimationListener(){  
  
        @Override  
        public void onAnimationEnd(Animation animation) {  
            if(null!=iamgeView){  
                DroidGap.this.root.removeView(iamgeView);  
                iamgeView=null;  
            }  
              
        }  
  
        @Override  
        public void onAnimationRepeat(Animation animation) {  
            // TODO Auto-generated method stub   
              
        }  
  
        @Override  
        public void onAnimationStart(Animation animation) {  
            // TODO Auto-generated method stub   
              
        }  
          
    });  
    translate_out.setFillAfter(true);  
    translate_out.setDuration(1000);  
    translate_out.setDetachWallpaper(true);  
            //  translate_in.   
    if(null!=iamgeView){  
        iamgeView.setAnimation(translate_out);   
    }             
            }else{  
                  
                if(null==iamgeView){  
                      
                    iamgeView=new ImageView(DroidGap.this);  
  
                    view.setDrawingCacheEnabled(true);  
                    Bitmap bitmap=view.getDrawingCache();  
                    if(null!=bitmap){  
                        Bitmap b=   Bitmap.createBitmap(bitmap);  
                        iamgeView.setImageBitmap(b);  
                    }  
                            DroidGap.this.root.addView(iamgeView);  
                }  
                }  
            super.onProgressChanged(view, newProgress);  
        }

<span style="color: rgb(51, 51, 51); font-family: tahoma, 宋体; font-size: 14px; line-height: 22.3999996185303px; text-align: justify; background-color: rgb(250, 250, 252);">其中的iamgeView：自己定义的ImageView控件。</span>

R.drawable.translate_in：进入的translate动画

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

<span style="color: rgb(51, 51, 51); font-family: tahoma, 宋体; font-size: 14px; line-height: 22.3999996185303px; text-align: justify; background-color: rgb(250, 250, 252);">R.drawable.translate_out：出的translate动画</span>

<span style="color: rgb(51, 51, 51); font-family: tahoma, 宋体; font-size: 14px; line-height: 22.3999996185303px; text-align: justify; background-color: rgb(250, 250, 252);"></span><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
     <translate android:fromXDelta="0%" android:toXDelta="-100%p"    
            android:duration="100" />    
      
</set>

该代码详细描述：在onProgressChanged方法中，首先判定是否加载进度是否到100，

在没有执行完的情况下，先去new ImageView对象，iamgeView=new ImageView(DroidGap.this);

然后进行设置view.setDrawingCacheEnabled(true);很重要的一句话，

为了下面能够对webview界面截取图片，即 Bitmap bitmap=view.getDrawingCache();

之后将bitmap加到imageview中：imageview.setImageBitmap(bitmap);

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

如果下面的页面加载完成了，就执行进入动画，即view.setAnimation(translate_in);

同时对该Imageview执行out动画，并且在动画的监听的结束时执行

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

iamgeView=null;

最后一点要注意清除截图，否则android虚拟机可能会出现报错。