Lottie动画(动画的未来)
我们在平时开发中,要实现一个动画,大多数情况直接用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避坑指南、常见错误、免异常总结,也能让动画更流畅;
如果觉得本文有用,可以在下方点个赞。如果发现有遗漏或不对的地方,请在下方留言~