SDWebImage+FLAnimatedImage,给Tabbar添加动图






  • 前言

PM动动嘴,开发跑断腿

PM看了N个产品后觉得点击Tabbar图片能动起来是个很好的体验,本着别人有的我们也得有,能抄一套是一套的原则,我在PM的威逼利诱下开始了探索之路。

首先说为什么要用SDWebImage而不是本地去直接加载GIF或者去写帧动画,因为PM的需求是Tabbar的icon在一些重要的活动或者节假日必须要后台去返回,日常就用本地默认的icon,所以考虑用SDWebImage+FLAnimatedImage。
为什么要在GIF动画执行完一次就停止,只因为动画一直循环播放不是PM想要的效果而已。

完工后效果

tababr_gif.gif

导出GIF有卡段,视频链接:https://player.youku.com/embed/XNDAxNDIxMjY4NA==





  • 参考

一位大牛的实现动画方式深度解析:https://www.jianshu.com/p/8e0f560188ff
SDWebImage:https://github.com/SDWebImage/SDWebImage
FLAnimatedImage:https://github.com/Flipboard/FLAnimatedImage





  • FLAnimatedImage

1. FLAnimatedImage具体解读请阅读:https://www.jianshu.com/p/10644979f01c


2. FLAnimatedImage的主要API和属性
/ **  GIF封面图片 ** /
@property (nonatomic, strong, readonly) UIImage *posterImage;   

/ **  GIF封面图片尺寸 ** /
@property (nonatomic, assign, readonly) CGSize size; 

/ **  GIF循环播放次数 ** /
@property (nonatomic, assign, readonly) NSUInteger loopCount;   

/ **  每帧图片的显示时间集合 ** /
@property (nonatomic, strong, readonly) NSDictionary *delayTimesForIndexes; 

/ **  动画的帧数量 ** /
@property (nonatomic, assign, readonly) NSUInteger frameCount;  

/ **  当前被缓存的帧图片的总数量 ** /
@property (nonatomic, assign, readonly) NSUInteger frameCacheSizeCurrent; // 

/ **  允许缓存多少帧图片 ** /
@property (nonatomic, assign) NSUInteger frameCacheSizeMax; // 允

/ **  从缓存中获取传递下标的图片 ** /
- (UIImage *)imageLazilyCachedAtIndex:(NSUInteger)index;

/ **  初始化 FLAnimatedImage ** /
- (instancetype)initWithAnimatedGIFData:(NSData *)data;
- (instancetype)initWithAnimatedGIFData:(NSData *)data optimalFrameCacheSize:(NSUInteger)optimalFrameCacheSize predrawingEnabled:(BOOL)isPredrawingEnabled NS_DESIGNATED_INITIALIZER;
+ (instancetype)animatedImageWithGIFData:(NSData *)data;



3. FLAnimatedImageView的主要API和属性
/ **  GIF动画播放一次之后的回调Block ** /
@property (nonatomic, copy) void(^loopCompletionBlock)(NSUInteger loopCountRemaining);


/ **  GIF动画当前显示的帧图片 ** /
@property (nonatomic, strong, readonly) UIImage *currentFrame;

/** GIF动画当前显示的帧图片索引 **/
@property (nonatomic, assign, readonly) NSUInteger currentFrameIndex;


4. FLAnimatedImage使用

在我的项目中TabbarItem是自定义的View,View上添加FLAnimatedImageView

Item.h

#import 
#import "WKTabbarModel.h"
#import "FLAnimatedImageView+WebCache.h"
#import "FLAnimatedImage.h"

@interface WKTabbarItem :  UIView

@property (strong, nonatomic) UILabel *itemLabel;
@property (strong, nonatomic) FLAnimatedImageView *itemImageView;

/**
 是否选中
 */
@property (assign, nonatomic) BOOL isSelected;

/**
 tababr item数据
 
 @param model model
 @param index index
 */
- (void)setModel:(WKTabbarModel *)model
           Index:(NSInteger)index;



/**
 点击tabbar item放大
 
 @param fromValue 动画的起始状态值
 @param toValue 动画的结束状态值
 @param height height
 */
- (void)changeShowScaleAnimationFromValue:(CGFloat)fromValue
                                  ToValue:(CGFloat)toValue
                                   Height:(CGFloat)height;

Item.m

#import "WKTabbarItem.h"
#import "CAAnimation+WKAnimation.h"

@interface WKTabbarItem()
{
    WKTabbarModel *_model;
}

@property (assign, nonatomic) NSInteger  index;

@end

@implementation WKTabbarItem

- (instancetype)initWithFrame:(CGRect)frame{
    
    if (self = [super initWithFrame:frame]) {
        
        [self setLayoutView];
    }
    return self;
}


- (void)setLayoutView{
    
    _itemImageView = [FLAnimatedImageView new];
    _itemImageView.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:_itemImageView];

    
    _itemImageView.sd_layout
    .topSpaceToView(self , (IS_IPHONE_10)?(10):(5))
    .widthRatioToView(self , 1)
    .centerXEqualToView(self )
    .heightIs((IS_IPHONE_10)?(28):(26));

}



//tababr model
- (void)setModel:(WKTabbarModel *)model Index:(NSInteger)index{
    
    _model = model;
    _index = index;
    [self initItemData];
}


//tababr 图片文字赋值
- (void)initItemData{
    
    _itemLabel.text = _model.title;

    if (self.isSelected) {
        
        _itemLabel.textColor = WKFontOrangeColor;
        [self setSelectedImage];
        
    }else{
        
        _itemLabel.textColor = WKLightGrayColor;
        [self setNormalImage];
    }
}

//动画改变item
- (void)changeShowScaleAnimationFromValue:(CGFloat)fromValue ToValue:(CGFloat)toValue Height:(CGFloat)height{
    

    [self initItemData];
    [WKTabbarStyleManager showScaleAnimationInView:_itemImageView  FromValue:fromValue  ToValue:toValue];
    [UIView animateWithDuration:0.35 animations:^{
        
        if (toValue == 1) {
            
            self.mj_y = 0;
            self.mj_h = height;
        }else{
            self.mj_y = -20;
            self.mj_h = height + 20;
        }
    }];
    
}


//设置选中图片
- (void)setSelectedImage{
    
    NSString *fileName = [_model.selectedImageUrl pathExtension];
    
    if([fileName isEqualToString:@"gif"]){  //gif用FLAnimatedImage加载
        
        NSArray *selImageArr = [WKUserDefaultsTool loadTabbarDownloaderSelectedImages];
        NSArray *norIamgeArr = [WKUserDefaultsTool loadTabbarDownloaderNormalImages];
        
        
        if (selImageArr.count >= 4 && norIamgeArr.count >= 4) { //下载保存成功后走本地保存的imageData,这样写是为了避免每次启动刷新
        
            NSData *imageData = selImageArr[_index];
            [self setAnimatedImageWithData:imageData];
        }else{ //第一次加载新的图片,走sd缓存
        
            [self setAnimatedImageWithData:[self setImageDataWithUrl:_model.selectedImageUrl]];
        }
    }else{
        _itemImageView.image = (![self setImageDataWithUrl:_model.selectedImageUrl])?([UIImage imageNamed:_model.selectedPlaceImage]):([UIImage imageWithData:[self setImageDataWithUrl:_model.selectedImageUrl]]);
    }
}

//设置未选中图片
- (void)setNormalImage{
    
    NSArray *selImageArr = [WKUserDefaultsTool loadTabbarDownloaderSelectedImages];
    NSArray *norIamgeArr = [WKUserDefaultsTool loadTabbarDownloaderNormalImages];
    
    if (selImageArr.count >= 4 && norIamgeArr.count >= 4) { //下载保存成功后走本地保存的imageData,这样写是为了避免每次启动刷新
        
        _itemImageView.image = [UIImage imageWithData:norIamgeArr[_index]];
    }else{ //第一次加载新的图片,走sd缓存
        [_itemImageView sd_setImageWithURL:[NSURL URLWithString:_model.normalImageUrl] placeholderImage:[UIImage imageNamed:_model.normalPlaceImage]];
    }
}


/*加载选中gif动态图片
如果是本地的gif,data可是直接写成本地路径的image转data
我的项目中是sdwebimage的缓存*/
- (void)setAnimatedImageWithData:(NSData *)imageData{
    
    if (imageData) {
        
        WeakSelf(weakSelf);
        
        FLAnimatedImage *gifImage   = [FLAnimatedImage animatedImageWithGIFData:imageData];
        _itemImageView.animatedImage = gifImage;
            
        //gif播放完毕停止到倒数第二张
        _itemImageView.loopCompletionBlock = ^(NSUInteger loopCountRemaining) { 
            weakSelf.itemImageView.image = [gifImage imageLazilyCachedAtIndex:gifImage.frameCount - 2];
        };
    }

}


//获取图片地址在sdwebimage缓存路径
- (NSData *)setImageDataWithUrl:(NSString *)url{
    
    NSString *path = [[[SDWebImageManager sharedManager] imageCache] defaultCachePathForKey:url];

    NSData   *imageData = [NSData dataWithContentsOfFile:path];
    return  imageData;
}






  • APP下载后台返回的Tabbar图片

#pragma mark ==================== tabbar样式 ====================
+ (void)requestTabbarStyle{
    
    dispatch_sync(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
        
        AppDelegate *aDelegate   = (AppDelegate *)WKApplication;
        NSString *url            = [NSString stringWithFormat:@"%@/%@",apiAddressDEF,bottomButtonsDEF];
        NSString *encryStr       = [NSString stringWithFormat:@"version=%@",APPVERSION];
        NSDictionary *parmsEncry = [WKTool DictionaryFromString:encryStr];
        
          [WKRequest requestPostWithPath:url Parameters:parmsEncry CallBack:^(id obj) {
            
            
            //            obj[@"status"] = @"0";
            if ([obj[@"status"]integerValue] == 1) {
                
                NSDictionary *dataDic = [WKTool dictionaryWithJsonString:[Encryption decrypt:obj[@"data"]]];
                
                NSArray *dataList                 = dataDic[@"dataList"];
                NSMutableArray *normolImgUrlArr   = [NSMutableArray array];    //未选中
                NSMutableArray *selectedImgUrlArr = [NSMutableArray array];    //选中
                NSMutableArray *titleArr          = [NSMutableArray array];    //文字
                
                // 选中
                static NSArray *selCacheArr;    //获取sd缓存路径图片数组
                static NSArray *selServerArr;   //获取sd第一次缓存图片数组
                //非选中
                static NSArray *norCacheArr;    //获取sd缓存路径图片数组
                static NSArray *norServerArr;   //获取sd第一次缓存图片数组
                
                
                if (dataDic.allKeys > 0) {
                    
                    for (NSDictionary *dic in dataList) {
                        
                        [normolImgUrlArr addObject:dic[@"img1"]];
                        [selectedImgUrlArr addObject:dic[@"img2"]];
                        [titleArr addObject:dic[@"text"]];
                    }

                    //后台更新图片,删除之前的缓存
                    if (![selectedImgUrlArr isEqualToArray:[WKUserDefaultsTool loadTabbarSelectedImg]]) {
                       [self clearImageCache];
                    }
                    
                    // 创建下载图片完成线程 group
                    dispatch_group_t group = dispatch_group_create();
                    
                    //下载选中tabbar图片
                    [self tabbarThemeWithManager:aDelegate.sdWebImgManager IsSelected:YES ImageUrlArr:selectedImgUrlArr CacheBlock:^(NSArray *cacheImgArr) {
                        
                        selCacheArr = cacheImgArr;
                    } ServerBlock:^(NSArray *serverImgArr) {
                        selServerArr = serverImgArr;
                    } Group:group];
                    
                    //下载非选中tabbar图片
                    [self tabbarThemeWithManager:aDelegate.sdWebImgManager IsSelected:NO ImageUrlArr:normolImgUrlArr CacheBlock:^(NSArray *cacheImgArr) {
                        
                        norCacheArr = cacheImgArr;
                    } ServerBlock:^(NSArray *serverImgArr) {
                        norServerArr = serverImgArr;
                    } Group:group];
                    
                    
                    // !!!!!! 下载图片完成后, 回到主线再更新tababr !!!!!!!
                    dispatch_group_notify(group, dispatch_get_main_queue(), ^{
                        
                        BOOL isSelImage = (selCacheArr.count >= 4 || selServerArr.count >= 4)?(YES):(NO);
                        BOOL isNorImage = (norCacheArr.count >= 4 || norServerArr.count >= 4)?(YES):(NO);
                        BOOL isSuccess  = [[[NSUserDefaults standardUserDefaults]objectForKey:@"TabbrSuccess"] boolValue];
                        
                        // 条件满足则表示全部下载完毕,避免下载的时间耗完图片可能并没有全部加载,会造成一些是本地一些是服务器图片的情况, 一次性加载刷新UI
                        if (isSelImage && isNorImage && !isSuccess) {
                            
                            [self saveTabbarStyleWithTitles:titleArr
                                               NormolImages:normolImgUrlArr
                                             SelectedImages:selectedImgUrlArr
                                         ItemAnimationValue:(APPWIDTH <= 375)?(1.80):(2.0)];
                            [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"TabbrSuccess"];
                        }
                        
                    });
                    
                }else{ //清空缓存tabbar图片
                    
                    [self clearImageCache];
                    dispatch_async(dispatch_get_main_queue(), ^{
                            [self saveTabbarStyleWithTitles:nil NormolImages:nil SelectedImages:nil ItemAnimationValue:1.00];
                    });
                }
                
                NSLog(@"******** %@tabbar样式 ******",dataDic);
                
            }else if([obj[@"status"]integerValue] == 0){    //清空缓存tabbar图片
                
                [self clearImageCache];
                // 创建下载图片完成线程 group
                dispatch_async(dispatch_get_main_queue(), ^{
                    [self saveTabbarStyleWithTitles:nil NormolImages:nil SelectedImages:nil ItemAnimationValue:1.00];
                });
            }
            
        }];
    });
    
}


/**
 清除缓存
 */
+ (void)clearImageCache{
    
    [[SDImageCache sharedImageCache] clearMemory];
    [[SDImageCache sharedImageCache] clearDiskOnCompletion:nil];
    [WKUserDefaultsTool saveTabbarDownloaderSelectedImages:nil];
    [WKUserDefaultsTool saveTabbarDownloaderNormalImages:nil];
    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"TabbrSuccess"];
}

/**
 保存服务器并设置tabbar样式
 
 @param titleArr 标题
 @param normolImgArr 默认
 @param selectedImgArr 选中
 @param tabbarAnimationValue 放大动画区间
 */
+ (void)saveTabbarStyleWithTitles:(NSMutableArray *)titles NormolImages:(NSMutableArray *)normolImages SelectedImages:(NSMutableArray *)selectedImages ItemAnimationValue:(CGFloat)itemAnimationValue{
    
   [WKUserDefaultsTool saveTabbarText:titles
                       TabbarNormolImg:normolImages
                     TabbarSelectedImg:selectedImages
                  TabbarAnimationValue:itemAnimationValue];
    
    
    AppDelegate *aDelegate      = (AppDelegate *)WKApplication;
    WKTabBarController *tabBarC = (WKTabBarController *)aDelegate.forceViewController.tabBarController;
    
    [tabBarC.tabBarView setChangeWithSelectedIndex:WKVARIABLE.isTabbarIndex
                                      ItemTitleArr:titles
                                   ItemImageNorArr:normolImages
                                   ItemImageSelArr:selectedImages];
    
}



/**
 服务器tabbar图片
 回调cacheBlock和serverBlock的目的,用户可能处于弱网环境,在下载的时间耗完图片可能并没有全部加载,会造成一些是本地一些事服务器图片的情况
 所以一次分别回调两个数组,然后计算count判断是全部下完,一次性全部显示

 @param manager SDWebImageManager
 @param isSelected 是否是下载选中图片(保存选中图片data,选中在某些情况会反gif,保存下来减少网络开销)
 @param imageUrlArr 下载地址
 @param cacheBlock 回调已下载成功的数组
 @param serverBlock 回调第一次成功的数组
 @param group dispatch_group_t
 */
+ (void)tabbarThemeWithManager:(SDWebImageManager *)manager  IsSelected:(BOOL)isSelected ImageUrlArr:(NSArray *)imageUrlArr CacheBlock:(CacheIamgeBlock)cacheBlock ServerBlock:(ServerImageBlock)serverBlock  Group:(dispatch_group_t)group{
    
    
    NSMutableArray *cacheImgArr  = [NSMutableArray array];      //本地保存过的
    NSMutableArray *serverImgArr = [NSMutableArray array];      //下载成功过的
    
    for (NSString *imageUrlStr in imageUrlArr) {
        
        dispatch_group_enter(group);
        
        NSString *imagePath = imageUrlStr;
        NSData   *imageData = [self imageDataFromDiskCacheWithKey:imagePath];

        if (imageData) {

            if (isSelected) {
              
                [cacheImgArr addObject:imageData];
                [WKUserDefaultsTool saveTabbarDownloaderSelectedImages:cacheImgArr];

                NSLog(@"+++++  tabbar选中已保存 +++++");
            }else{
                [cacheImgArr addObject:imageData];
                [WKUserDefaultsTool saveTabbarDownloaderNormalImages:cacheImgArr];
                NSLog(@"+++++  tabbar未选中已保存 +++++");
            }
            cacheBlock(cacheImgArr);
            dispatch_group_leave(group);
        } else {

            NSURL *url = [NSURL URLWithString:imageUrlStr];
            [[SDWebImageDownloader sharedDownloader] downloadImageWithURL:url
                                                                  options:SDWebImageDownloaderHighPriority
                                                                 progress:nil
                                                                completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {

                                                                [[[SDWebImageManager sharedManager] imageCache] storeImage:image
                                                                                                                 imageData:data
                                                                                                                    forKey:url.absoluteString
                                                                                                                    toDisk:YES
                                                                                                                completion:nil];
                                                                if (error) {
                                                                    // 加载失败
                                                                    NSLog(@"~~~~~~~~~~~tabbar下载失败 ~~~~~~~~~~~");
                                                                } else {
                                                                    // 加载成功
                                                                    NSLog(@"!!!!!!!!!  tabbar下载完成 !!!!!!!!!");
                                                                    [serverImgArr addObject:data];
                                                                    serverBlock(serverImgArr);
                                                                }
                                                                dispatch_group_leave(group);
                                                            }];
        }
    }
}







至此,PM要的功能已实现,另外我的TabbarView也是自定义的,代码就不贴了,基本上就是调用自定义item的方法。其实也是觉得现在这种线程下载实现动画的方法还是太low,先放上做个笔记,过完新年来重构。

2019新年快乐,猪事顺利!

你可能感兴趣的:(SDWebImage+FLAnimatedImage,给Tabbar添加动图)