文档章节

Android上webview界面切换动画效果

feng_blog
 feng_blog
发布于 2015/08/31 16:54
字数 605
阅读 270
收藏 0

使用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虚拟机可能会出现报错。


版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

feng_blog

feng_blog

粉丝 120
博文 130
码字总数 105422
作品 3
朝阳
iOS工程师
私信 提问
Android Browser学习六 多窗口: NavScreen 切换窗口

前面我们简单介绍了Tab和TabControl的大体结构,但是如果想要实现浏览器的多标签切换功能, 还需要一个用户交互界面, 这个界面在Android Browser中就是NavScreen了: 这里我们介绍一下下面这个U...

SuShine
2014/02/11
3.9K
0
Android:这是一份全面 & 详细的动画入门学习指南

前言 动画的使用 是 开发中常用的知识 可是动画的种类繁多、使用复杂,每当需要 采用自定义动画 实现 复杂的动画效果时,很多开发者就显得束手无策 本文将献上一份动画简介,包括动画的种类、...

Carson_Ho
07/23
0
0
[Android] Activity页面切换效果

大家使用Android的原生UI都知道,Android的Activity跳转就是很生硬的切换界面。其实Android的Activity跳转可以设置各种动画。 通常,对Activity切换时加入过渡动画的方法是: 在startActivi...

枫兮兮
2014/02/27
219
0
android界面切换问题

我要实现一个如附件那样能够同事展示两个activity界面的效果。本来是只展示绿色的activity。但是我点击切换按钮。蓝色的activity就动画效果跑出来跟绿色的activity各占一半界面。动画效果很好...

黄俄白
2012/08/31
1K
1
android 三种实现水平向滑动方式(ViewPager、ViewFilpper、ViewF...

ViewPager ViewPager类提供了多界面切换的新效果。新效果有如下特征: [1] 当前显示一组界面中的其中一个界面。 [2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分...

带梦想一7飞
2013/08/01
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 7系统增加swap

转载请注明文章出处:CentOS 7系统增加swap swap是位于磁盘上的特殊文件(或分区),属于“虚拟内存”的一部分。通俗点就是内存的备胎,内存充足的情况下,基本上没swap什么事(和设置有关)...

tlanyan
19分钟前
2
0
基于Prometheus和Grafana的监控平台 - 环境搭建

相关概念 微服务中的监控分根据作用领域分为三大类,Logging,Tracing,Metrics。 Logging - 用于记录离散的事件。例如,应用程序的调试信息或错误信息。它是我们诊断问题的依据。比如我们说...

JAVA日知录
59分钟前
5
0
PHP运行时全局构造体

struct _php_core_globals { zend_bool magic_quotes_gpc; // 是否对输入的GET/POST/Cookie数据使用自动字符串转义。 zend_bool magic_quotes_runtime; //是否对运行时从外部资源产生的数据使...

冻结not
今天
4
0
webpack插件html-webpack-plugin

本文转载于:专业的前端网站→webpack插件html-webpack-plugin 1、插件安装 npm install html-webpack-plugin --save-dev 2、插件使用 webpack.config.js配置文件为: var htmlWebpackPlugin=...

前端老手
今天
6
0
数据挖掘

zhengchen1996
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部