记录在安卓webview上,gif,apng,pixi.js,lottie-web动画导致闪屏问题
随着公司项目对动画要求越来越高,从由美术提供简单的gif,或者css,js开发简单动画变成了使用渲染引擎pixi.js使用序列帧动画,或者使用龙骨,spine等更加复杂炫酷的动画。但是发现屏幕在播放动画的时候会偶尔发生块状闪屏,使用gif,apng,pixi.js,lottie-web等动画技术都会导致闪屏(不同机型不同情况)。经过大量的调试,最后发现当webview滑到底部的时候特别容易触发闪屏
随着公司项目对动画要求越来越高,从由美术提供简单的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);
}
});
更多推荐
所有评论(0)