ios json文件加载动态图,让app真正动起来
最近项目中遇到的需求是这样的:打开app,我们需要加载一个动态的网络图片(gif图).但美工做好之后,给了我们一个几十兆的gif动画图片(而且还是压缩压缩再压缩的都有毛边儿效果了),先不说效果怎么样,单纯的加在项目中,而且还是动态获取,可想而知,用户打开app.首先下载个几十兆的动态图!估计app在用户端的手机上存活的时间不超过三秒!!!更别说后续体验怎么样了.
鉴于以上弊端,在网上查了些资料,发现了一个ios、 Android、 macOS、React Native中均可使用的开源库:Lottie!
大致工作原理是:Lottie是一个可以解析使用【bodymovin】插件从 Adobe After Effects 中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。
至于如何制成并导出动画json文件及lottie的使用 ,大家可以参考一下两个链接,我也在博主的博客中受益!!!再次也多谢技术分享的大佬们!
1.lottie官网 gitHub地址:https://github.com/airbnb/lottie-ios
2.iTerryWang博主的:Lottie简介 & iOS集成使用.
那么本篇文章中,不详细叙述关于lottie的原理等.只粘出lottie在项目中的使用情况.
假设我们已经在项目中配置了lottie.
场景1:UI设计提供了动画json 文件及所需images包资源.(此场景在app中每次固定显示,耦合度较高,使用条件有限!)
场景1中效果,我们可以直接使用官网给出的简单实现方法:
1.先将json文件及images图片资源包拖到工程中.
例: json文件为:data.json
声明个lottie动画对象:
@property(nonatomic,strong)LOTAnimationView *launchAnimation;
//添加动画:
_launchAnimation =[LOTAnimationView animationNamed:@"data"];//实例化对象
_launchAnimation.cacheEnable =NO;
_launchAnimation.frame =CGRectMake(20, 200, 350, 250);//动画范围
_launchAnimation.contentMode =UIViewContentModeScaleToFill;
_launchAnimation.animationSpeed =0.5;//动画时间
_launchAnimation.loopAnimation =YES;//是否循环动画
[_launchAnimation play];//开始动画
[self.view addSubview:_launchAnimation];
场景2:动态网络获取相关json文件及所需images包资源.(此场景可应对项目中gif动图根据需求随时修改,耦合度较低,也经常被使用!)
//创建文件夹
NSFileManager *fileManager = [NSFileManager defaultManager];
NSString *str1 = NSHomeDirectory();
NSString *filePath = [NSString stringWithFormat:@"%@/Documents/imageViews",str1];
if(![fileManager fileExistsAtPath:filePath]){
NSString *path = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents"];
NSString *directryPath = [path stringByAppendingPathComponent:@"imageViews"];
[fileManager createDirectoryAtPath:directryPath withIntermediateDirectories:YES attributes:nil error:nil];
filePath =directryPath;
}
//NSLog(@"filePath --- %@",filePath);
//假设img资源包有12个元素(当然返回多少图片根据服务器返回结果确定!)
for (int i =0; i <12; i ++) {
NSString *urlString =[NSString stringWithFormat:@"http://192.168.1.188/images/img_%d.png",i];
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:urlString]];
UIImage *image = [UIImage imageWithData:data]; // 取得图片
NSString * string =[NSString stringWithFormat:@"%@/images/img_%d.png",filePath,i];
BOOL success = [UIImagePNGRepresentation(image) writeToFile:string atomically:YES];
if (success){
NSLog(@"写入本地成功");
}
}
//data.json文件存储这里不描述
//找到data.json文件路径.
NSString * dataPath =[NSString stringWithFormat:@"%@/data.json",filePath];
_launchAnimation =[LOTAnimationView animationWithFilePath:dataPath];
_launchAnimation.cacheEnable =NO;
_launchAnimation.frame =CGRectMake(20, 200, 350, 250);//动画范围
_launchAnimation.contentMode =UIViewContentModeScaleToFill;
_launchAnimation.animationSpeed =0.5;//动画时间
_launchAnimation.loopAnimation =YES;//是否循环动画
[_launchAnimation play];//开始动画
[self.view addSubview:_launchAnimation];