最近項(xiàng)目需要實(shí)現(xiàn)一個(gè)圖片瀏覽器的功能，要求也很常規(guī)，如下：
1、具有彈出、收起動(dòng)畫(huà)
2、在第N張圖片收起圖片瀏覽器時(shí)，容器內(nèi)容要求定位在該圖片的顯示位置
3、流暢
最終實(shí)現(xiàn)效果如下：

2016-12-29 14_37_37.gif

由于項(xiàng)目中的文章頁(yè)面使用H5渲染，所以解決思路如下：
1、js通知native所需要顯示的圖片url數(shù)組、index（當(dāng)前點(diǎn)擊的圖片索引）、rect（當(dāng)前點(diǎn)擊圖片的區(qū)域位置）
2、native在關(guān)閉圖片瀏覽器時(shí)，通知js當(dāng)前查看的圖片index（js根據(jù)index跳轉(zhuǎn)到網(wǎng)頁(yè)對(duì)應(yīng)位置），js回調(diào)native通知當(dāng)前圖片的rect（用于native播放收起動(dòng)畫(huà)）
期間遇到一個(gè)問(wèn)題：
native并沒(méi)有webview中已加載的圖片資源，所以彈出動(dòng)畫(huà)難免出現(xiàn)加載過(guò)程，影響體驗(yàn)
解決方案如下：
注冊(cè)NSURLProtocol，監(jiān)聽(tīng)webview中所有的圖片請(qǐng)求，并用SDWebImage緩存，以u(píng)rl為key，搞定。

- (void)startLoading {
    NSURLSession *session = [NSURLSession sharedSession];
    NSMutableURLRequest *request = [self.request mutableCopy];
    [NSURLProtocol setProperty:@(YES) forKey:kProtocolHandledKey inRequest:request];
    
    __weak typeof(self) weakSelf = self;
    
    self.sessionTask = [session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
        if (error) {
            return;
        }
        NSString *mimeType = response.MIMEType;
        if ([mimeType hasPrefix:@"image"]) {
            NSString *url = weakSelf.request.URL.absoluteString;
            SDImageCache *cache = [SDImageCache sharedImageCache];
            [cache storeImage:[UIImage imageWithData:data] forKey:url toDisk:NO];
        }
        
        [weakSelf.client URLProtocol:weakSelf didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowedInMemoryOnly];
        [weakSelf.client URLProtocol:weakSelf didLoadData:data];
        [weakSelf.client URLProtocolDidFinishLoading:weakSelf];
    }];
    [self.sessionTask resume];
}