【MUI】5+ 预截原动画打开webview案例

讲几句

每次官方的案例不是太多，包括有段时间出世的plus.nativeObj.View
可以先看看官方的文章
plus.nativeObj.View解析
 HTML5+ 官方 API

不说别的，咱们来看看官方人员的这一段解释

看起来很高大上啊！来来来，趁着晚上的时间折腾一下。

WebView截图

新建一个bitmap类型的变量（其实是原生的一种映射变量）

var bitmap = new plus.nativeObj.Bitmap('nwbitmap');//nwbitmap为bitmap的id

然后将webview内容绘制到Bitmap对象中

    var ws = plus.webview.currentWebview();
    ws.draw(bitmap,function(){
        console.log('截屏绘制图片成功');
    },function(e){
        console.log('截屏绘制图片失败：'+JSON.stringify(e));
    });

为了能获取到每一个webview的截图，我们封装一下

        //webview截图
        var drawWebView = function(webview, bitmap, callback) {
            bitmap = bitmap || new plus.nativeObj.Bitmap('defultBitMap');
            webview.draw(bitmap, function() {
                callback && callback(bitmap);
            }, function(err) {
                callback && callback();
                console.log('截图错误：' + JSON.stringify(err))
            });
        }

原生动画

原生动画这块的资料太多，我这里不做多解释，大家可以查阅资料5+开始原生动画

        //开始原生动画
        var startAnimation = function(type, bitmap, callback) {
            plus.nativeObj.View.startAnimation({
                type: type || 'pop-in'//pop-in从右到左划入 pop-out从右到左划出
            }, {}, {
                bitmap: bitmap
            }, function() {
                console.log('动画结束');
                callback && callback();
                //关闭原生动画 在这里我注释，选择在回调函数callback内处理
                //plus.nativeObj.View.clearAnimation();
            });
        }

对比

直接上干货吧
app.js

var App = (function($) {
    var app = {};
    
    app.openWindow = function(url, id, op, data) {

        var nw = plus.webview.create(url, id, op, data),
            bitmap = new plus.nativeObj.Bitmap('nwbitmap');

        //开始原生动画
        var startAnimation = function(type, bitmap, callback) {
            plus.nativeObj.View.startAnimation({
                type: type || 'pop-in'//默认
            }, {}, {
                bitmap: bitmap
            }, function() {
                console.log('动画结束');
                callback && callback();
                //关闭原生动画 
                //plus.nativeObj.View.clearAnimation();
            });
        }

        //webview截图
        var drawWebView = function(webview, bitmap, callback) {
            bitmap = bitmap || new plus.nativeObj.Bitmap('defultBitMap');
            webview.draw(bitmap, function() {
                callback && callback(bitmap);
            }, function(err) {
                callback && callback();
                console.log('截图错误：' + JSON.stringify(err))
            });
        }

        //webview onloaded事件
        nw.onloaded = function(e) {
            //开始截图open
            drawWebView(nw, bitmap, function(bitmap) {
                if(!bitmap) {
                    nw.show('pop-in', 300);
                    return;
                }
                //播放页面打开的动画
                startAnimation('pop-in', bitmap, function() {
                    //动画播放完毕后
                    //显示webview
                    nw.show('none', 0, function() {
                        //当webview关闭时
                        nw.onclose = function() {
                                //播放页面关闭动画
                                startAnimation('pop-out', bitmap, function() {
                                    //关闭页面原生动画 
                                    plus.nativeObj.View.clearAnimation();
                                });
                            }
                            //关闭页面原生动画 
                        plus.nativeObj.View.clearAnimation();
                    })
                });

            });
        }
    }

    return app;
}(mui))

main.html

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <script src="js/mui.min.js"></script>
        <script src="js/app.js" ></script>
        <script>
            mui.init();
            mui.ready(function(){
                var url = 'feedback.html';
                document.querySelectorAll("button")[0].addEventListener('tap',function(){
                    App.openWindow(url,'hehe');    
                });
                document.querySelectorAll("button")[1].addEventListener('tap',function(){
                    mui.openWindow(url,url,{
                         show:{
                            duration:300
                        },
                        waiting:{
                            autoShow:false
                        }
                    });
                });
            });
        </script>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-block">截图方式 打开页面</button>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-block">MUI默认 打开页面</button>
    </body>

    <script>
    </script>

</html>

看看效果

【MUI】5+ 预截原动画打开webview案例

可能动态图不是很清晰，在这里我总结一下
用预截图做动画打开webview 的方式我简称 预截原动画
用默认webview的位移、渐变的效果打开webview 的方式我简称 渐变帧动画

预截原动画
预截原动画是通过先把要打开的webview创建，然后监听onloaded事件，截一张webview的bitmap图给原生动画调用
无疑这种方式的渲染打开是很稳的，然而可能是我代码逻辑问题，也可能是受webview默认的打开动画影响，在关闭时会瞬间闪屏。我也不多做解释。
预截原动画，真的很稳，打开新的页面，可以看得出，不掉帧，mui默认渐变帧动画的方式会稍微掉帧，如果页面dom js 复杂可能效果差异更大

渐变帧动画
渐变帧动画是给webview的位置以及样式作出调整，从而达到一个动画的目的，但是当你的页面dom复杂，js加载量大，尤其是图片加载较多的话，那么在这种方式的Webview动画就会掉帧啦

不过可以尝试截图原动画的方式去处理较复杂页面，否则，我们用了这么久的渐变帧动画完全够用了啦。

晚安，我要睡了，卧槽，这么晚了

返回动画修复

前面说过了，动态图也看到了，用预截原动画打开的页面，返回，也就是关闭的时候会闪屏一下，现在有新的解决方案，虽然马虎点

1）使用mui的预加载新页面

2）截图新页面
截图成功就监听

loaded事件：为播放打开动画
show事件：为关闭动画
hide事件：再次截图新页面
![图片上传中...]
，并播放关闭动画，且播放完毕后，关闭页面，关闭动画

截图失败就使用 渐变帧动画 打开新页面

js改动如下

var App = (function($) {
    var app = {};

    //开始原生动画
    function startAnimation(type, bitmap, callback) {
        plus.nativeObj.View.startAnimation({
            type: type || 'pop-in' //默认
        }, {}, {
            bitmap: bitmap
        }, function() {
            callback && callback(plus.nativeObj.View.clearAnimation);
        });
    }

    //webview截图
    function drawWebView(webview, bitmap, callback) {

        bitmap = bitmap || new plus.nativeObj.Bitmap('defultBitMap');
        webview.draw(bitmap, function() {
            callback && callback(bitmap);
        }, function(err) {
            callback && callback();
            console.log('截图错误：' + JSON.stringify(err))
        });
    }

    app.openWindow = function(op) {
        if(op.id && plus.webview.getWebviewById(op.id)) {
            return;
        }
        var nw = $.preload(op),
            bitmap = new plus.nativeObj.Bitmap('nwbitmap');
        //webview onloaded事件
        nw.onloaded = function(e) {
            //开始截图open
            drawWebView(nw, bitmap, function(bitmap) {
                if(!bitmap) {
                    //截图失败就降级用默认打开
                    nw.show('pop-in');
                    return;
                }
                nw.addEventListener('show', function() {
                    plus.nativeObj.View.clearAnimation();
                })
                nw.addEventListener('hide', function() {
                    
                    drawWebView(nw, bitmap, function(bitmap) {
                        if(!bitmap) {
                            //截图失败就降级用默认打开
                            nw.close('pop-out');
                            return;
                        }
                        //播放页面关闭动画
                        startAnimation('pop-out', bitmap, function(close) {
                            nw.close();
                            //关闭页面原生动画 
                            close(); 
                        });
                        bitmap.clear();
                        bitmap = null;
                    });
                    
                })

                //播放页面打开的动画
                startAnimation('pop-in', bitmap, function(close) {
                    //动画播放完毕后
                    //显示webview
                    nw.show('none');
                    //close();
                });

            });

        }

    }

    return app;
}(mui))

html页面多增加了几个图片，更好的对比渲染情况

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <script src="js/mui.min.js"></script>
        <script src="js/app.js" ></script>
        <script>
            mui.init();
            mui.ready(function(){
                var url = 'feedback.html';
                document.querySelectorAll("button")[0].addEventListener('tap',function(){
                    App.openWindow({
                        url:url,
                        id:'hehe'
                    });
                });
                document.querySelectorAll("button")[1].addEventListener('tap',function(){
                    mui.openWindow(url,url,{
                        waiting:{
                            autoShow:false
                        }
                    });
                });
            });
            
        </script>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-block">截图方式 打开页面</button>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-block">MUI默认 打开页面</button>
    </body>

    <script>
    </script>

</html>

效果图

效果图2.5m被吃了，尼玛动态图

本文源码5+ 预截原动画