讲几句
每次官方的案例不是太多，包括有段时间出世的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
看看效果
可能动态图不是很清晰，在这里我总结一下
用预截图做动画打开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页面多增加了几个图片，更好的对比渲染情况
效果图
效果图2.5m被吃了，尼玛 动态图
本文源码5+ 预截原动画