记录在安卓webview上,gif,apng,pixi.js,lottie-web动画导致闪屏问题

2023-05-16

随着公司项目对动画要求越来越高,从由美术提供简单的gif,或者css,js开发简单动画变成了使用渲染引擎pixi.js使用序列帧动画,或者使用龙骨,spine等更加复杂炫酷的动画。

但是发现屏幕在播放动画的时候会偶尔发生块状闪屏,使用gif,apng,pixi.js,lottie-web等动画技术都会导致闪屏(不同机型不同情况)。

经过大量的调试,最后发现当webview滑到底部的时候特别容易触发闪屏,于是做了曲线处理,height: calc(100vh - 1px); 暂时解决当前手机闪屏情况,可其他手机可能还是会。

百度搜了好久都没搜到,google的时候发现一篇文章,地址:https://www.bbsmax.com/A/QV5ZXgn6zy/

可能是因为Android webView 在5.0+上启动硬件加速,造成部分手机出现闪烁、白屏等现象。

一、造成闪烁的原因是WebView5.0开启了硬件加速,所以首要任务是关闭硬件加速,有三种

1、 AndroidManifest.xml中的Activity配置:android:hardwareAccelerated=“false”

2、xml中:android:layerType=“software”

3、Java代码设置:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { CookieManager cookieManager = CookieManager.getInstance(); cookieManager.setAcceptThirdPartyCookies(mWebView, true); mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); }

二、但是关闭硬件加速后会造成:View too large to fit into drawing cache, needs 183047040 bytes, only 8294400 available。有人说是设置android:hardwareAccelerated="false"即可解决,但本人项目中并无卵用,所以,

1、设置:mWebView.setDrawingCacheEnabled(false);  mWebView.getSettings().setLoadWithOverviewMode(true);

2、webView重写:

public class MyWebView extends android.webkit.WebView {
    public MyWebView(Context context) {
        super(context);
    }
 
    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        invalidate();
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

然后拿公司华为手机5.0+测,完美解决。可是,,,,魅族5.0+直接白屏。。。

不知道啥原理,一通乱按:

1、android:layerType="software"在ListView中也给设置(如果你用的是ScrollView的话给他也要设置)

2、

mWebView.setWebViewClient(new WebViewClient() {
    //再增加这个方法
            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                super.onReceivedSslError(view, handler, error);
                handler.proceed();
            }
 
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                mWebView.loadUrl(url);
                return true;
            }
}

最后总结:

1、在activity配置中增加 android:hardwareAccelerated=“false”

2、WebView xml中:android:layerType=“software”,ListView(或者外层嵌套ScrollView)android:layerType="software”

3、重写WebView,代码看上面

4、Java代码中:

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager cookieManager = CookieManager.getInstance();
            cookieManager.setAcceptThirdPartyCookies(mWebView, true);
            mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }
		mWebView.setDrawingCacheEnabled(false);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(url);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                super.onReceivedSslError(view, handler, error);
                handler.proceed();
            }
 
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                mWebView.loadUrl(url);
                return true;
            }
 
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }
        });
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
            }
        });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

记录在安卓webview上,gif,apng,pixi.js,lottie-web动画导致闪屏问题 的相关文章

  • 3.12生产者消费者模型(pthread_cond_t、sem_t)

    生产者消费者模型 生产者不能在容器满了继续生产 消费者不能在容器为空的时候消费 生产者消费者模型 粗略的版本 include lt stdio h gt include lt pthread h gt include lt stdlib h
  • ActiveMQ中Topic模式队列和Queue模式队列区别

    Topic和Queue是ActiveMQ两种消息模式 Topic用于消息订阅 xff0c 属于一对多 xff1b Queue用于消息处理 xff0c 属于一对一 分别从工作模式 有无状态 传递完整性 处理效率四个方面比较 工作模式 xff1
  • Java SpringBoot 公众号集成模板推送消息

    前言 上篇 付项目地址 xff1a https blog csdn net A yonga article details 129398716 spm 61 1001 2014 3001 5501 集成公众号请看之前的文章 本篇说明 基于已
  • Android中native进程内存泄露的调试技巧(一)

    基于Android5 0版本 Android为Java程序提供了方便的内存泄露信息和工具 xff08 如MAT xff09 xff0c 便于查找 但是 xff0c 对于纯粹C C 43 43 编写的natvie进程 xff0c 却不那么容易
  • onNewIntent 什么时候调用

    protected void onNewIntent Intent intent Since API Level 1 This is called for activities that set launchMode to 34 singl
  • [MySQL] MySQL日志系统

    概述 Mysql的日志系统是Mysql保证无论何时崩溃数据都不会丢失的关键 众所周知Mysql是持久化的数据库 所有的数据都是持久化到硬盘中的 保证数据不会丢失 Mysql保证数据不会丢失是从以下两个方面来体现的 能够恢复到任意时刻的数据状
  • IDEA搭建JavaWeb项目,JDBC和Servlet-JSP技术实现注册功能

    文章目录 使用IDEA搭建JavaWeb项目一 IDEA新建JavaWeb项目1 新建java项目2 修改项目配置3 项目部署到Tomcat 二 使用JDBC和Servlet JSP技术实现注册功能1 引入jar包2 搭建项目结构3 后端实
  • JS实现省市区三级联动

    目标 xff1a 用JS实现省市区的三级联动效果 学习内容 xff1a 掌握JS对DOM元素的获取掌握 JS对DOM元素的创建和删除掌握JSON数组的简单解析 实现思路 xff1a 省市区三级联动主要是三个下拉菜单之间的联动效果 xff0c
  • MVC三层架构详解

    文章目录 MVC三层架构详解一 MVC是什么 xff1f 1 什么是低耦合 xff1f 2 低耦合有什么好处 xff1f 3 增加代码复用率4 部署快 xff0c 且生命周期成本低5 可维护性高 二 MVC详解1 MVC经典模式2 MVC设
  • Spring-MVC入门

    文章目录 前言一 Spring MVC是什么 xff1f MVC xff1a MVC的工作流程 xff1a 优势 xff1a 二 使用步骤1 创建Maven项目导入依赖 2 配置前端控制器DispatcherServlet 3 配置后端控制
  • 使用阿里云OSS实现图片上传案例

    文章目录 前言一 OSS是什么 xff1f 二 使用步骤1 开通OSS服务2 创建bucket3 创建子账户4 查看帮助文档 xff0c 编写后端代码5 layui前端 总结 前言 在正式的开发环境中 xff0c 类似图片的静态资源一般不会
  • 使用EasyExcel实现Excel的导入导出

    文章目录 前言一 EasyExcel是什么 xff1f 二 使用步骤1 导入依赖2 编写文件上传配置3 配置表头对应实体类4 监听器编写5 控制层6 前端代码 总结 前言 在真实的开发者场景中 xff0c 经常会使用excel作为数据的载体
  • 使用linux部署项目步骤

    文章目录 前言一 服务器环境配置二 数据库导入三 项目打包1 修改项目中的访问路径2 修改db properties的数据库访问路径3 打包4 修改配置 xff0c 启动服务 四 测试总结 前言 今天学习了在服务器中部署项目 xff0c 记
  • IntelliJ IDEA 2023.1 最新变化 【附带ChatGPT教程】

    ChatGPT开源公众号 xff1a https gitee com wy521a astar weixin mp最新变化 2023 1主要更新用户体验编辑器JavaScala分析器版本控制系统构建工具运行 调试框架和技术DockerKub
  • SpringBoot整合Quartz以及异步调用

    文章目录 前言一 异步方法调用1 导入依赖2 创建异步执行任务线程池3 创建业务层接口和实现类4 创建业务层接口和实现类 二 测试定时任务1 导入依赖2 编写测试类 xff0c 开启扫描定时任务3 测试 三 实现定时发送邮件案例1 邮箱开启
  • SpringCloud详解07-Nacos配置管理

    系列文章目录 文章目录 系列文章目录前言一 nacos配置管理二 使用步骤1 基本配置2 导入Nacos配置 三 配置实时刷新总结 前言 接上篇 xff0c 本篇记录Nacos的配置管理 所有的代码都是基于前篇的基础上 一 nacos配置管
  • 使用SpringBoot+JWT+MybatisPlus实现简单的登陆状态验证

    文章目录 前言一 JWT是什么 xff1f 二 使用步骤1 创建项目 xff0c 导入依赖 xff0c 配置 引入工具类2 编写LoginController和UserController3 编写跨域拦截器和token验证拦截器4 全局拦截
  • 浅谈分布式锁

    文章目录 前言一 分布式锁 xff1f 二 实现思路1 存储一个唯一的键2 使用setnx3 给键设置唯一值4 因为超时导致的并发执行4 Redission5 代码实现 总结 前言 最近学习了分布式锁 xff0c 本篇来记录一下 一 分布式
  • 初识STM32单片机

    目录 一 单片机基本认知 二 STM系列单片机命名规则 三 标准库与HAL库区别 四 通用输入输出端口GPIO 五 推挽输出与开漏输出 六 复位和时钟控制 xff08 RCC xff09 七 时钟控制 八 中断和事件 九 定时器介绍 一 单
  • ubuntu16.04 安装ctags,以及一些使用方法的介绍

    vim对于新手来说太不友好了 xff0c 今天折腾ctags折腾了一天终于是有所收获 xff0c 现在来大概介绍一下 首先ctags顾名思义 xff0c 就算给各种库和 cpp文件打标签 xff0c 得到的标签文件给后面omni compl

随机推荐