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 视频 设计和开发都可以参考
lottie-ios lottie-ios
LottieFiles 动画资源下载,上面有 json 和 aep 文件可以拿来用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。