一般app中都会带有动画，而如果是一些复杂的动画，不但实现成本比较高，而且实现效果可能还不能达到UI想要的效果，于是我们可以借助lottie来完成我们想要的动画。
lottie动画1.gif
lottie动画2.gif
Lottie动画库
- Lottie是Airbnb开源的一个库，通过bodymovin可以将AE设计好的动画导出为json格式的文件，交付给开发完成动画。以上两个gif就是用AE导出的动画。
- 关于Lottie有很多优点，Airbnb的人员也一直在更新，不到一年时间已经有1w+star，UI只需要导出一份json和图片即可完成动画开发，Lottie有ios和安卓库，两端都适用(想想要是用gif或者自己实现，那需要很大的成本并且还不一定做的好)。
动画管理类
- 有了
Lottie这个库，开发也不用费精力去斟酌动画的实现，只需调用api完成实现，但是这样产生一个问题：当动画数量比较多时，如果都放在bundle下，会造成app体积增大。所以我们的做法是把所有的json和图片资源放在服务器分别打包成zip包，然后download下来放在library/caches下解压，播放时根据礼物的id去寻找资源播放。
动画管理.png
- 每次启动app时，动画管理类都会去请求api获取当前所有礼物
id，version和url，如果有新的礼物或者礼物需要更新动画，则根据url下载zip包。 - 下载完zip包，使用zipZap去完成解压操作，并解压到指定的路径下.
/**
解压
@param filePath zip路径
@param locationPatch 解压文件夹的路径
*/
- (void)unZipWithFilePath:(NSString *)filePath
locationPatch:(NSString *)locationPatch
success:(OBDynamicGiftManagerDownloadSuccessBlock)successBlock
failureBlock:(OBDynamicGiftManagerDownloadFailureBlock)failureBlock {
NSFileManager* fileManager = [NSFileManager defaultManager]; NSURL* path = [NSURL fileURLWithPath:locationPatch]; NSString * zipPath = filePath; ZZArchive* archive = [ZZArchive archiveWithURL:[NSURL fileURLWithPath:zipPath] error:nil]; // ZZArchive* archive = [ZZArchive archiveWithURL:path error:nil]; NSError *error = nil; for (ZZArchiveEntry* entry in archive.entries) { NSURL* targetPath = [path URLByAppendingPathComponent:entry.fileName]; if (entry.fileMode & S_IFDIR) // check if directory bit is set [fileManager createDirectoryAtURL:targetPath withIntermediateDirectories:YES attributes:nil error:&error]; else { // Some archives don't have a separate entry for each directory // and just include the directory's name in the filename. // Make sure that directory exists before writing a file into it. [fileManager createDirectoryAtURL: [targetPath URLByDeletingLastPathComponent] withIntermediateDirectories:YES attributes:nil error:&error]; [[entry newDataWithError:nil] writeToURL:targetPath atomically:NO]; } } if (error) { if (failureBlock) { failureBlock(error); } } else { if (successBlock) { successBlock(); } } } - 同时把获取到的礼物
id、version等数据保存到数据库中，并且如果下载zip包还需要把下载的状态记录要数据库中，使用的是fmdb。
// 插入礼物相关数据
- (BOOL)insertPresentGif:(OBPresentGif *)presentGif {
__block BOOL result = NO;
[[self databaseQueue] inDatabase:^(FMDatabase *db) { if (![db open]) { NSLog(@"打开失败!"); }; NSString *query = [NSString stringWithFormat:@"select * from presentGifts where presentId= '%@'", presentGif.presentId]; FMResultSet *set = [db executeQuery:query]; if (![set next]) { // 如果数据不存在再执行插入数据操作 result = [db executeUpdate:@"insert OR REPLACE into presentGifts (presentId, name, download, version)values(?,?,?,?)", presentGif.presentId, presentGif.name, presentGif.download, presentGif.version]; } [db close]; }]; return result; } // 检查对比礼物版本号 - (BOOL)checkPresentGifVersionWithPresentGif:(OBPresentGif *)presentGif { __block BOOL result = YES; __block long currentVersion; [[self databaseQueue] inDatabase:^(FMDatabase *db) { if (![db open]) { NSLog(@"打开失败!"); }; FMResultSet *set = [db executeQuery:@"select version from presentGifts WHERE presentId = (?)", presentGif.presentId]; while ([set next]) { if ([set longForColumn:@"version"]) { currentVersion = [set longForColumn:@"version"]; } // 判断版本是否一样 result = [presentGif.version longValue] == currentVersion ? YES : NO; } [db close]; }]; return result; } // 更新礼物zip包下载状态，如果下载失败或者没下载完，那么下次启动 / 播放礼物时将会检查并添加到下载队列下载 - (BOOL)updatePresentGiftDownLoadState:(NSInteger )state presentId:(NSInteger )presentId { __block BOOL result = NO; [[self databaseQueue] inDatabase:^(FMDatabase *db) { if (![db open]) { NSLog(@"打开失败!"); }; NSString *str = [NSString stringWithFormat:@"UPDATE presentGifts SET downLoadStatus = %@ WHERE presentId = %@", [NSNumber numberWithInteger:state], [NSNumber numberWithInteger:presentId]]; result = [db executeUpdate:str]; [db close]; }]; return result; } // 根据礼物id获取url - (NSString *)downloadUrlWithPresentId:(NSInteger)presentId { __block NSString *downloadUrl; [[self databaseQueue] inDatabase:^(FMDatabase *db) { if (![db open]) { NSLog(@"打开失败!"); }; FMResultSet *set = [db executeQuery:@"select download from presentGifts WHERE presentId = (?)", [NSNumber numberWithInteger:presentId]]; while ([set next]) { if ([set stringForColumn:@"download"]) { downloadUrl = [set stringForColumn:@"download"]; } } [db close]; }]; return downloadUrl; } 动画的播放
假如在同一时间有多个动画进行播放，那么还得考虑一个问题：是放在一个队列里有序播放，还是后面的动画顶掉前面的动画播放？ 然而机智的产品让我们两套都做了。。。
队列播放
- 从IM协议收到礼物动画消息后，把礼物动画添加到一个数组里面，然后播放顺序播放数组里面的动画。
- 因为业务需要，用户在观看礼物时，可以进行个别操作，所以还需要控制动画的图层位置。
/**
动画队列播放
@param giftId 礼物id
@param view 父视图
@param belowView belowView
*/
- (void)showDynamicGiftWithGiftId:(NSInteger)giftId toView:(nonnull UIView *)view belowView:(nullable UIView *)belowView { NSString *dynamicGiftPath = [self getDynamicGiftPathWithGiftId:giftId]; NSString *jsonPath = [dynamicGiftPath stringByAppendingPathComponent:@"data.json"]; // 判断data.json是否存在 if ([[NSFileManager defaultManager] fileExistsAtPath:jsonPath]) { [_jsonPathQueryArray addObject:jsonPath]; if (view && belowView) { NSArray *viewArr = [NSArray arrayWithObjects:view, belowView, nil]; [self animationToView:viewArr]; } else if (belowView == nil) { NSArray *viewArr = [NSArray arrayWithObjects:view, nil]; [self animationToView:viewArr]; } } // 如果不存在，应该重新下载. else { [self redownloadDynamicGiftWithGiftId:giftId]; } } - (void)animationToView:(NSArray *)viewArr { if (self.isAnimationPlaying == YES) { return; } else { if (viewArr.count == 2) { UIView *backgroundView = viewArr[0]; UIView *belowView = viewArr[1]; if (_closeButtonAddingToView == NO) { // 添加关闭按钮，可以关闭动画 [backgroundView addSubview:self.closeButton]; _closeButtonAddingToView = YES; [self.closeButton mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(backgroundView); make.bottom.equalTo(backgroundView).offset(SCREEN_RU(-64)); }]; [backgroundView layoutIfNeeded]; } kWSELF if (_jsonPathQueryArray.count > 0) { // 加载json动画 NSString *jsonPath = [_jsonPathQueryArray firstObject]; _currentAnimation = [LOTAnimationView animationWithFilePath:jsonPath]; _currentAnimation.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight); // 缓存动画 _currentAnimation.cacheEnable = YES; [backgroundView insertSubview:_currentAnimation belowSubview:belowView]; self.isAnimationPlaying = YES; [_currentAnimation playWithCompletion:^(BOOL animationFinished) { [_currentAnimation removeFromSuperview]; // 移除动画 self.isAnimationPlaying = NO; if (_jsonPathQueryArray.count > 1) { // 播放动画完成后 检测播放队列是否还有需要播放的动画，如果有，移除播放完的动画，然后播放新的。 [_jsonPathQueryArray removeObjectAtIndex:0]; [wself animationToView:viewArr]; } else { // 如果是最后一个动画，播放完后，移除动画，并且把关闭按钮也移除掉。 if (_jsonPathQueryArray.count == 1) { [_jsonPathQueryArray removeObjectAtIndex:0]; } [wself.closeButton removeFromSuperview]; _closeButtonAddingToView = NO; } }]; } } } } 顶替播放
- 在播放动画的时候，如果IM来了个新动画，就把之前的动画移除，直接播放新的动画。
// 如果有动画正在播放,并且超过一定时间 则关闭
if (_currentAnimation && (_currentAnimation.animationProgress >= 0.3)) {
[_currentAnimation pause];
[_currentAnimation removeFromSuperview];
_currentAnimation = nil;
[self replaceModeAnimationShowDynamicGiftWithGiftId:giftId toView:view belowView:belowView]; } else if (!_currentAnimation) { [self replaceModeAnimationShowDynamicGiftWithGiftId:giftId toView:view belowView:belowView]; } - (void)replaceModeAnimationShowDynamicGiftWithGiftId:(NSInteger)giftId toView:(UIView *)view belowView:(UIView *)belowView { NSString *dynamicGiftPath = [self getDynamicGiftPathWithGiftId:giftId]; NSString *jsonPath = [dynamicGiftPath stringByAppendingPathComponent:@"data.json"]; // 判断data.json是否存在 if ([[NSFileManager defaultManager] fileExistsAtPath:jsonPath]) { // 加载动画 _currentAnimation = [LOTAnimationView animationWithFilePath:jsonPath]; self.animationDuration = _currentAnimation.animationDuration; _currentAnimation.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight); _currentAnimation.contentMode = UIViewContentModeScaleAspectFill; _currentAnimation.cacheEnable = YES; if (_closeButtonAddingToView == NO) { [view addSubview:self.closeButton]; _closeButtonAddingToView = YES; [self.closeButton mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(view); make.bottom.equalTo(view).offset(SCREEN_RU(-64)); }]; } self.isAnimationPlaying = YES; kWSELF // 由于在block中防止循环引用需要用weak self， 但是block中 多次使用wself， 有可能在调用第一个方法后释放掉，所以需要强引用 weak self 保证在block内不被释放 if (view && belowView) { __strong __typeof (wself) sself = wself; [view insertSubview:_currentAnimation belowSubview:belowView]; [_currentAnimation playWithCompletion:^(BOOL animationFinished) { [sself->_currentAnimation removeFromSuperview]; _currentAnimation = nil; [wself.closeButton removeFromSuperview]; _closeButtonAddingToView = NO; sself.isAnimationPlaying = NO; }]; } else if (belowView == nil) { __strong __typeof (wself) sself = wself; [view insertSubview:_currentAnimation belowSubview:self.closeButton]; [_currentAnimation playWithCompletion:^(BOOL animationFinished) { [sself->_currentAnimation removeFromSuperview]; _currentAnimation = nil; [wself.closeButton removeFromSuperview]; _closeButtonAddingToView = NO; sself.isAnimationPlaying = NO; }]; } } // 如果不存在，应该重新下载. else { [self redownloadDynamicGiftWithGiftId:giftId]; } } - 最后再配置一个开关在后台控制两个模式的切换就完成了。
作者：iOShuihui
链接：https://www.jianshu.com/p/c1b3fcc7b16d
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
扫一扫
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
