前言

由于领导的安排,公司做了一个美其名曰混合开发的项目,其原理便是最基本的原生开发+H5开发,经过类似于JSBridge的办法通讯,两头界说办法完结,可是h5那边界面是在刷新机制,假如要做到原生的这种push动画作用,不太简单,所以就安排让原生来做,花了一天时刻处理了,说一说处理的方案,假如有更好的,欢迎各位补充。

思路:

大概有两种办法,这儿抛开一些细节不说,首先要清楚假如要做的话,要知道什么时分是进入,什么时分是退出。由于进入和退出的逻辑动画不同,回来办法能够同前端界说好,在回来的时分拦截,此刻这个变量叫true,其他状况便是false,当然在你操作完今后,变量true要自动置为false。

第一种:便是每次拦截url,调查url的改动,很遗憾WK没有署理办法能够监听URl的变化,可是能够经过调查者模式获取变化今后url的值,然后假如是行进的话,就声明一个本类的对象push曩昔,撤退的话就pop出来。

第二种:不生成新的对象,只在本类中用动画作用的办法完结,预备两张图片,一张是当时webView界面的图片,另一张是你要push或许pop到的界面的图片,做图片的动画平移作用。

问题

先说第一种,第一种是最简单的办法,可是问题也是很明显的,抛开性能不说,在push的过程中,界面会有一段时刻的白屏,由于wk在加载的时分是需求时刻的,并不能做到流畅,很影响用户体验,自己试了一下暂时没有找到更好的处理办法,决断就抛弃了。

第二种是个处理方案,可是问题仍旧很明显。IOS和安卓不同,安卓能够经过网页缓存直接生成图片,而且安卓是知道什么时分网页烘托完结。假如在前端点击跳转,IOS这边的署理办法是无法知道什么时分网页加载完结了,只有当第一次进这个类的时分,署理办法才会触发,我猜测应该跟Tableview是一个原理,只有在load或许add的时分,才会发生回调,中间过程是无法捕获的。所以这也是为什么连URL都要经过调查者模式去获取了。

详细处理过程

处理办法:针对无法获取到烘托成功的署理这个问题,换个思路,已然客户端无法知道,能够让前端告知客户端。别的说一下网上有说能够经过调查者模式调查estimatedProgress这个值是否为1判别,我试了一下,每次进入并不会被调查到。

声明两个特点,一个用来保存上一次获取到的网页界面图片,一个是判别行进仍是退出

@property (nonatomic, strong) UIImage *lastSnpImage;
@property (nonatomic, assign) BOOL isGoBack;

IOS11今后提供了一个截屏的办法,能够在webView初始化成功今后直接调用,而且将此刻生成的图片作为lastSnpImage。由于主页是不需求退出动画的。

原生与H5交互中实现H5界面的push动画

原生与H5交互中实现H5界面的push动画

每次行进或许撤退的时分,都要更新当时的网页界面图片,这样能够保证不会受到线程影响。

原生与H5交互中实现H5界面的push动画

原生与H5交互中实现H5界面的push动画

imageWithView办法是把当时的view自动截屏,这个办法不会block回调,而takeSnapshotWithConfiguration这个办法是对webview截屏,而此刻webview其实现已烘托完结了,无法获取到上一个界面的内容了。

-(UIImage *)imageWithView:(UIView *)view
{
  UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0f);
  [view.layer renderInContext:UIGraphicsGetCurrentContext()];
  UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return snapshotImage;
}

这儿说一下为什么要平移两张图片,假如仅仅last图片,由于webview在平移前现已加载完结了,会导致你的动画作用就像翻书相同,仅仅当时页的向左或许向右滑动。

需求留意的是,在烘托完结今后,把isGoBack要置NO,假如前端无法判别是行进仍是撤退的话,这边只有在撤退的办法中才会赋值YES。

在需求行进撤退的当地做平移动画即可,平移的办法有许多,能够创建了一个view掩盖在上面,这个view的大小是两倍的手机宽度,别离放置两个图片,假如是退出,相当于从屏幕外右移,假如是进入,相当于从0起点移动到屏幕外,详细就不说了。

做的这基本上作用完结了,可是仍然有个小问题,便是每次点击进入或许退出的时分,屏幕都会闪一下,经过打断点能够找到问题所在,是由于webView在生成成功今后,还没来及作动画,下一界面现已烘托完结了,此刻对WebView操作不管是躲藏或许大小控制,都会在视觉上影响,由于takeSnapshotWithConfiguration这个办法是异步回调,处理办法是声明一个特点view作为蒙版,在还没有进入takeSnapshotWithConfiguration之前,接收到行进或许撤退办法之后,初始化这个蒙版view,然后掩盖在view上,而且把last图片加上去,在完结今后,移除这个蒙版view即可。

原生与H5交互中实现H5界面的push动画

原生与H5交互中实现H5界面的push动画