Lottie
Lottie 是 Airbnb 开源的一个动画项目，它支持 iOS, mac OS Android RN，由于某些复杂动画的实现，往往会写很多的 code 来实现它，而且调试动画的效果会比较花费时间。用它来解决某些动画会带来很大的便利。
设计师在 After Effects 设计好相关的动画，然后安装上 BodyMovin 这个插件，这个插件，可以帮导出动画效果的 JSON 文件，然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果。
优势
- 开发可以方便的实现动画，节约调试动画效果时间等，不用写一大堆 code 去实现动画，只要设计给相关的 JSON 文件就可以了。
- 多个平台可以共用，例如 iOS 和 Android，公用一个动画。
- 可以通过 URL 的方式加载 JSON 文件，来替换客户端动画，不用发版本了
- 设计想了一个屌炸天的动画，然后给到开发，开发说这个实现不了，或者说很费时间，然后让设计用这种方式去实现。
- 对于 iOS 来说支持 ViewController 转场动画
- iOS 平台上用 Core Animation 做矢量动画。性能不错，而且有缓存
- 对比于用 GIF 动画，手写动画，轻量，性能和存储上都更佳。
不足之处
- iOS 版本要 >= 8.0 才可以使用。不支持 7.x
- 对于一些交互性的动画，支持不是很好。主要是对于播放性的动画
- Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出
- 动画无法被编辑，加载下来是什么样子，就原封不动
基础用法
Demo 里面的素材是来自官网的。把相关动画的 JSON 文件导入工程中。这里我们拿了 LottieLogo1.json 这个文件。然后用 LOTAnimationView 生成一个动画的 View 代码如下:
- (LOTAnimationView *)logo {
if (!_logo) {
// 通过传入相关的 JSON 文件来呈现动画。
_logo = [LOTAnimationView animationNamed:@"LottieLogo1"];
// 设置 View 的 contentMode
_logo.contentMode = UIViewContentModeScaleAspectFill;
}
return _logo;
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// 播放动画
[self.logo play];
}
然后通过
-
[self.logo play]就可以播放动画 -
[self.logo pause]停止动画，如果调用完这个方法，再调用 play 会接着上次动画停止的地方继续执行 -
initWithContentsOfURL通过传入一个 NSURL 来加载 JSON 动画 -
isAnimationPlaying动画是否正在执行 -
loopAnimation是否循环播放动画 -
animationProgress动画的进度 -
animationDuration动画时长 -
self.logo.animationProgress = 0.0f把动画定位到某一个帧。 -
[self.logo playWithCompletion:^(BOOL animationFinished) {}]设置动画执行完回调
ViewController 转场动画
通过 LOTAnimationTransitionController 来实现 presentViewController 和 dismissViewControllerAnimated 转场动画
- (IBAction)btnTapped {
BViewController *b = [BViewController new];
b.transitioningDelegate = self;
[self presentViewController:b animated:YES completion:nil];
}
#pragma mark - UIViewControllerTransitioningDelegate
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
presentingController:(UIViewController *)presenting
sourceController:(UIViewController *)source {
// vcTransition1.json 是一个动画的 json 文件，传参的时候，不用带后缀 .json
LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
// 返回一个准守 UIViewControllerAnimatedTransitioning 协议对象
return animationController;
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
fromLayerNamed:@"outLayer"
toLayerNamed:@"inLayer"];
return animationController;
}
URL 方式加载
这种方式会有缓存，要 kill 掉 App, 下次进入页面才会有新的动画。
- (LOTAnimationView *)animationView {
if (!_animationView) {
NSURL *URL = [NSURL URLWithString:@"http://127.0.0.1:8990/LottieLogo1.json"];
_animationView = [[LOTAnimationView alloc] initWithContentsOfURL:URL];
_animationView.contentMode = UIViewContentModeScaleAspectFill;
}
return _animationView;
}
其他
lottie Demo 一个输入键盘字母的的动画，里面的实现是定义一个 collectionView，每个字母其实是一个 UICollectionViewCell, Cell 里面有个 subView 是 LOTAnimationView。然后有个 UITextField，不过放在屏幕外面看不到。来调起键盘，字母的动画主要靠 LOTAnimationView 实现,然后项目里面要有所有字母的动画 JSON 文件。
lottie Tutorial 视频 设计和开发都可以参考
LottieFiles 动画资源下载，上面有 json 和 aep 文件可以拿来用
