lottie动画是一个AE制作的动画,多个平台可使用,iOS,Android,web,React Native,Windows,动画内容可以随意通过AE更改,内容多样化,多平台样式统一化,但代码可塑性就并不强,也正因如此,使用较为方便。
你可以打开官网进行阅读,http://airbnb.io/lottie/相关文档。
lottie的集成
官方支持使用cocopods。
pod 'lottie-ios'
pod install
使用的时候引入头文件#import <lottie/Lottie.h>
即可
官方文档默认是swift语言,如果使用swift语言开发,可以直接阅读官方文档,这里介绍OC。
lottie的使用
定义属性
@property (nonatomic , strong)LOTAnimationView *animation;
@property (nonatomic , strong)UIView * bgview;
加载动画json数据,如果你不知道这里的json怎么来,打开lottie的资源网站你就懂了。https://lottiefiles.com/。选择一个动画下载下来。拉进工程。
self.animation = [LOTAnimationView animationNamed:@"funky_chicken" inBundle:[NSBundle mainBundle]];
self.bgview = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 400)];
self.bgview.center = self.view.center;
[self.view addSubview:self.bgview];
//这里使用是masonry布局,这个布局方式不固定,自己开心就好。
[self.animation setContentMode:UIViewContentModeScaleAspectFit];
[self.animation mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.left.top.right.mas_equalTo(0);
}];
// __weak typeof(self) weakself = self;
[self.animation playWithCompletion:^(BOOL animationFinished) {
}];
这样一个简单的动画就完成了。
这里可以使用递归的方式,可以让动画一直延续下去或者使用loopAnimation = YES方式无限循环。
除了加载本地项目的json资源,还可以使用webURL
self.animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:@"https://assets9.lottiefiles.com/packages/lf20_NI3Uye.json"]];
当然还有其他的加载方式。可自行体验
[LOTAnimationView animationNamed:@""];
[LOTAnimationView animationWithFilePath:@""];
[LOTAnimationView animationFromJSON:nil];
[LOTAnimationView animationFromJSON:nil inBundle:[NSBundle mainBundle]];
除此之外还有一个重要的东西就是帧速率问题
self.animation.animationSpeed = 0.5;
播放与暂停
play的几种方式
[self.animation play]; //普通的播放方式
[self.animation playWithCompletion:^(BOOL animationFinished) {
}];//播放结束后带回调
调整播放进度
self.animation.loopAnimation = NO;
[self.animation playToProgress:0.7 withCompletion:^(BOOL animationFinished) {
//只播放0-0.7之间动画,完整动画为1.0
}];
[self.animation playFromProgress:0.5 toProgress:1.0 withCompletion:^(BOOL animationFinished) {
//只播放0.5-1之间动画,开始动画为0
}];
调整帧,这个需要知道动画帧数,否则不好把握。
self.animation.loopAnimation = NO;
[self.animation playFromFrame:@5 toFrame:@20 withCompletion:^(BOOL animationFinished) {
}];