目標(biāo)
1、接入閃萌動(dòng)圖
2肤无、仿qq動(dòng)圖效果
3的诵、支持webp
demo鏈接
https://github.com/pengwj/blogWork/tree/master/code/ShanMengTest
接入閃萌api
閃萌的api需要在他們官網(wǎng)http://www.weshineapp.com缆瓣，找客服領(lǐng)取測(cè)試用的id、密鑰诗鸭。
仿qq動(dòng)圖效果
主要布局采用UICollectionView，大家可以看我demo的實(shí)現(xiàn)参滴，我項(xiàng)目中是在輸入框文字變換的回調(diào)中刷新請(qǐng)求接口的强岸。另外就是需要10秒鐘不操作，彈窗自動(dòng)收回砾赔。
//添加定時(shí)器
- (void)refreshTimer
{
_timerValue = 0;
if (!_timer) {
_timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timerDown) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
}
//執(zhí)行任務(wù)
- (void)timerDown
{
self.timerValue++;
if (self.timerValue >= 10) {
[self hideSelf];
}
}
//定時(shí)器的停止
- (void)finishedTimer
{
self.timerValue = 0;
[self.timer invalidate];
self.timer = nil;
}
#pragma mark - UIScrollViewDelegate
- ( void)scrollViewDidScroll:( UIScrollView *)scrollView
{
// 重新開始計(jì)時(shí)
[self refreshTimer];
}
支持webp
這個(gè)是臨時(shí)加進(jìn)來(lái)的需求蝌箍，開始我想著應(yīng)該很簡(jiǎn)單，結(jié)果沒(méi)想到還蠻坑的暴心。
webp是谷歌在2010年推出的新一代圖片格式十绑，在壓縮方面比當(dāng)前JPEG格式更優(yōu)越，在質(zhì)量相同的情況下酷勺，WebP格式圖像的體積要比JPEG格式圖像小40%本橙。
支持webp的顯示
下面兩個(gè)方案我都實(shí)現(xiàn)過(guò)，其中方案1操作起來(lái)更簡(jiǎn)單一些（demo中選擇的也是這個(gè)方案）脆诉，但是由于項(xiàng)目中的SDWebImage版本低于3.0.0甚亭，所以只好選擇了修改SD的庫(kù)贷币，也就是方案2。
方案1
使用SDWebImageWebPCoder+SDWebImage即可實(shí)現(xiàn)webp的動(dòng)圖+靜態(tài)圖加載亏狰。但這個(gè)方案比較蛋疼的是SDWebImageWebPCoder比較依賴SDWebImage的實(shí)現(xiàn)役纹，中間引用了一大堆SDWebImage的方法，完全沒(méi)辦法獨(dú)立使用暇唾，如果SD用的老版本促脉，那這個(gè)方案基本可以放棄了。
添加pod
pod 'SDWebImageWebPCoder'
pod 'SDWebImage', '~> 5.0'
然后執(zhí)行pod install
但是庫(kù)去要去拉取谷歌的libwebp文件會(huì)失敗策州，所以需要我們進(jìn)行還原操作瘸味。具體操作如下。
操作步驟：
此操作步驟來(lái)自于iOSCoder_XH够挂，下面復(fù)制一下主要是為了備份旁仿。
1、 查看 mac 中 cocoapods 本地庫(kù)路徑:
pod repo
2孽糖、在本地庫(kù)中, 并找到對(duì)應(yīng)的 libwebp 版本的文件
find ~/.cocoapods/repos/master -iname libwebp
3枯冈、打開上一步查找的路徑
open /Users/xxxxxxx/.cocoapods/repos/master/Specs/1/9/2/libwebp
4、在文件下找到之前pod install失敗的libwebp版本文件夾
5办悟、打開文件libwebp.podspec.json尘奏，修改git的地址
"source": {
"git": "https://chromium.googlesource.com/webm/libwebp",
"tag": "v1.0.2"
},
改為
"source": {
"git": "https://github.com/webmproject/libwebp.git",
"tag": "v1.0.2"
},
保存
6、重新pod install
使用方法
這里單獨(dú)拎出來(lái)主要是感覺(jué)這個(gè)庫(kù)的使用有點(diǎn)怪病蛉，官網(wǎng)例子也寫的不太清楚罪既。
在你需要展示webp文件的位置，添加coder
// Add coder
SDImageWebPCoder *webPCoder = [SDImageWebPCoder sharedCoder];
[[SDImageCodersManager sharedManager] addCoder:webPCoder];
然后再使用SD加載圖片的方法即可支持webp圖片的播放铡恕。
UIImageView *imageView;
NSURL *webpURL;
[imageView sd_setImageWithURL:webpURL];
是不是很清爽琢感，這里也支持一下SDWebImageWebPCoder，開發(fā)者好像還是一個(gè)國(guó)內(nèi)的小伙伴探熔，感謝他們的無(wú)私奉獻(xiàn)驹针。
方案2
如果項(xiàng)目中SDWbImage的版本比較舊的時(shí)候，可以考慮一下方案2诀艰。方案2主要是修改了SDWebImage解析WebP數(shù)據(jù)的方法sd_imageWithWebPData柬甥，然后用YYImage去解析數(shù)據(jù)，解析后通過(guò)SD的方法返回其垄。
開啟SDWebImage的WebP參數(shù)
在Build Settings中搜索Preprocessor Macros苛蒲，添加"SD_WEBP=1",添加這個(gè)參數(shù)后，SDWebImage才會(huì)執(zhí)行webp相關(guān)解析代碼绿满。
添加YYImage
pod 'YYImage'
然后執(zhí)行pod install
修改SDWebImage的sd_imageWithWebPData方法
// 添加YYImage頭文件
#import <YYImage/YYImage.h>
修改sd_imageWithWebPData方法如下
+ (UIImage *)sd_imageWithWebPData:(NSData *)data {
YYImage *image = [[YYImage alloc] initWithData:data scale:0];
return image;
}
修改SDWebImage的SDScaledImageForKey方法
該方法在SDWebImageCompat.m文件中臂外。
之所以修改這里，是因?yàn)镾DWebImage會(huì)在這里對(duì)圖片進(jìn)行繪制處理，主要是為了適配不同的屏幕scale漏健。所以我們需要在這里直接返回一下嚎货。
【注意??????：不同的SD版本修改的方法可能不同，需要大家自己看項(xiàng)目中SD源碼】
inline UIImage *SDScaledImageForKey(NSString *key, UIImage *image) {
if (!image) {
return nil;
}
// 添加的代碼如下（判斷是YYImage直接返回）
if ([image isKindOfClass:NSClassFromString(@"YYImage")]) {
return image;
}
// 添加的代碼如上
if ([image.images count] > 0) {
NSMutableArray *scaledImages = [NSMutableArray array];
for (UIImage *tempImage in image.images) {
[scaledImages addObject:SDScaledImageForKey(key, tempImage)];
}
return [UIImage animatedImageWithImages:scaledImages duration:image.duration];
}
else {
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
CGFloat scale = 1.0;
if (key.length >= 8) {
// Search @2x. or @3x. at the end of the string, before a 3 to 4 extension length (only if key len is 8 or more @2x./@3x. + 4 len ext)
NSRange range = [key rangeOfString:@"@2x." options:0 range:NSMakeRange(key.length - 8, 5)];
if (range.location != NSNotFound) {
scale = 2.0;
}
range = [key rangeOfString:@"@3x." options:0 range:NSMakeRange(key.length - 8, 5)];
if (range.location != NSNotFound) {
scale = 3.0;
}
}
UIImage *scaledImage = [[UIImage alloc] initWithCGImage:image.CGImage scale:scale orientation:image.imageOrientation];
image = scaledImage;
}
return image;
}
}
使用如下
主要是需要替換UIImageView為YYAnimatedImageView蔫浆，其他的正常使用即可殖属。
// 引入YYAnimatedImageView.h頭文件
#import <YYImage/YYAnimatedImageView.h>
// 初始化YYAnimatedImageView
@property (nonatomic, strong) YYAnimatedImageView *gifImageView;
NSURL *url = [NSURL URLWithString:@"閃萌動(dòng)圖webp地址"];
[self.gifImageView sd_setImageWithURL:url completed:nil];
將webp轉(zhuǎn)換成gif并保存到本地
核心代碼如下：
YYImageDecoder *decoder = [YYImageDecoder decoderWithData:self.gifImageView.animatedImageData scale:0];
NSData *gifData = [YYImageEncoder encodeImageWithDecoder:decoder type:YYImageTypeGIF quality:1];
使用YYImageDecoder先解壓webp圖片，然后用YYImageEncoder的encodeImageWithDecoder方法將webp格式的動(dòng)圖轉(zhuǎn)換成gif格式的Data瓦盛，然后保存到相冊(cè)中洗显。
全部代碼如下：
YYImageDecoder *decoder = [YYImageDecoder decoderWithData:self.emojiImage.animatedImageData scale:0];
NSData *gifData = [YYImageEncoder encodeImageWithDecoder:decoder type:YYImageTypeGIF quality:1];
[[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{
[[PHAssetCreationRequest creationRequestForAsset] addResourceWithType:PHAssetResourceTypePhoto data:gifData options:nil];
} completionHandler:^(BOOL success, NSError * _Nullable error) {
dispatch_async(dispatch_get_main_queue(), ^{
if(success && !error){
[SVProgressHUD showSuccessWithStatus:@"保存動(dòng)圖成功"];
}else
[SVProgressHUD showErrorWithStatus:@"保存動(dòng)圖失敗,請(qǐng)重試"];
});
}];
});
總結(jié)
遇到各個(gè)博客沒(méi)有比較成熟的解決方案時(shí)，記得優(yōu)先看開源庫(kù)原环、系統(tǒng)庫(kù)的相關(guān)頭文件挠唆。
