我们在平时开发中，要实现一个动画，大多数情况直接用Gif图，但Gif占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配；另一种是用帧动画，但是帧动画占用空间比 Gif 还要大的多，也需要做适配。
当项目中有很多地方用到动画效果的时候会添很多Gif，这样打出来的包会很大。这时候我们会要求设计师压缩尺寸后再给我们，这样包是变小了，但是用户体验会很差，动效很不清晰。
这种情况下，就轮到 Lottie、 (LottieFiles) 登场了，阿里新出的 犸良https://design.alipay.com/emotion就是基于Lottie动画的。设计师做好动效后只需导出很小的Json文件，把Json文件拖入工程，在iOS (安卓、Web) 代码中读取这份Json文件，解析动画结构和参数信息并渲染就行了。
一、集成：
在iOS中使用需要先集成Lottie的SDK (Swift版本、OC版本)，然后直接在代码中使用就可以了。
1、Swift：
pod'lottie-ios'复制代码
代码：
import UIKit
import Lottie
class ViewController: UIViewController {
let lottieView = AnimationView()
override func viewDidLoad() {
super.viewDidLoad()
lottieView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
lottieView.center = self.view.center
lottieView.animation = Animation.named(“lottieJson“)//绑定Lottie动画
lottieView.loopMode = .loop//动画效果 执行单次、多次
lottieView.contentMode = .scaleAspectFit
lottieView.backgroundBehavior = .pauseAndRestore//设置进入后台是否暂停动画
self.view.addSubview(lottieView)
lottieView.play()//开始动画
//lottieView.stop()//暂停动画
}}
2、OC：
pod'lottie-ios_Oc'复制代码
代码：
#import "ViewController.h"
#import <lottie_ios_Oc/LOTAnimationView.h>
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
LOTAnimationView *lottieView = [LOTAnimationView animationNamed:@"lottieJson"];//绑定Lottie动画
lottieView.frame = CGRectMake(0, 0, 400, 400);
lottieView.center = self.view.center;
lottieView.loopAnimation = YES;//动画效果 执行单次、多次
lottieView.contentMode = UIViewContentModeScaleAspectFit;
//handleWillEnterBackground 进入后台默认暂停动画
[self.view addSubview:lottieView];
[lottieView playWithCompletion:^(BOOL animationFinished) {
//动画完成后可执行自定义操作
}];
[lottieView play];//开始动画
//[lottieView stop];//暂停动画
}
@end
二、总结
1、优点：
·开发成本低，设计师导出Json文件给到开发即可。
·动画实现成功率高，只要设计师能设计出来的都能实现。
·支持服务端URL方式创建，通过服务端配置Json文件随时替换动画，不用重新发版。
·iOS、安卓、Web可用同一套Json文件。
·支持转场动画，Presen／Dismiss时可做转场效果。
2、缺点：
·低配设备上解析大Json文件可能比较耗时、异常，适用硬件性能较好的设备。
解决：
·手机性能不断升级，将有效缓解这方面问题；
·切换页面后暂停动画，节省资源；
·设计师注意好这些注意事项 Lottie避坑指南、常见错误、免异常总结，也能让动画更流畅；
如果觉得本文有用，可以在下方点个赞。如果发现有遗漏或不对的地方，请在下方留言~
网友评论