lottie-ios 的集成及使用

 

基于以上的问题, 建议使用Lottie的场合为复杂的播放式形变动画, 因为形变动画由程序员一点点的写路径确实不直观且效率低. 但即便如此, Lottie也是我们在CoreAnimation之后一个很好的补充.

以上健呗的Demo地址: https://github.com/syik/JR

直播伴侣地址: https://github.com/syik/BulletAnalyzer

 

 

Lottie 是一个可应用于Andriod和iOS的动画库，它通过bodymovin插件来解析Adobe After Effects 动画并导出为json文件，通过手机端原生的方式或者通过React Native的方式渲染出矢量动画。
lottie三方框架地址：https://github.com/airbnb/lottie-ios

总而言之，咱们开发人员有了这个三方框架，再也不用去苦恼各种动画的实现了，还得跟UI设计人员扯皮。这个框架，UI设计人员将动画图制作好了后，利用工具转为json文件，咱们通过框架提供的方法加载json就可以实现各种精彩的动画，但是有一个缺点，这个框架的动画效果只能作为展示，不能产生交互行为。进入正题，开始集成。

一、通过cocoapods集成。

1.在你的podfile中添加：
pod 'lottie-ios'

2.运行
pod install

• 假如你的项目之前集成过其他三方，比如Masonry，这个时候你编译项目，可能会报code1错误，当然没报错最好。稍安勿躁，人家官方文档说了，还得安装Carthage。

二、安装Carthage

1、安装 Homebrew

• 将以下命令粘贴至终端即可
  第一步：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

第二步：

brew update

2、安装 Carthage

brew install carthage

可通过下面这条命令来查看版本。

carthage version

3、使用 Carthage 安装依赖

第一步：

cd ~/路径/项目文件夹

第二步：创建一个空的 Carthage 文件 Cartfile

touch Cartfile

第三步：使用 Xcode 打开 Cartfile 文件

open -a Xcode Cartfile

第四步：在cartfile里面加一行代码

github "airbnb/lottie-ios" "master"

第五步：终端执行更新命令

carthage update --platform iOS

OK,你再编译项目试试，，这个时候code1错误没有了。是不是很惊喜。注意：项目名字最好为英文，因为这个框架是国外的，假如项目名字包含中文也会出现想像不到的错误。

那么问题来了，这个时候可能会出现这种情况：导入头文件还有索引，但是导入后总是报错，报找不到那个头文件，这种时候，只需多重启几次Xcode。就能OK

三、lottie的使用

Lottie支持iOS 8 及其以上系统。当我们把动画需要的images资源文件添加到Xcode的目标工程的后，Lottie 就可以通过JSON文件或者包含了JSON文件的URL来加载动画。

• 最简单的方式是用LOTAnimationView来使用它,这也是最常用的一种方式。

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];

• 如果你使用到了多个bundle文件，你可以这么做：

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie" inBundle:[NSBundle YOUR_BUNDLE]];
[self.view addSubview:animation];
[animation playWithCompletion:^(BOOL animationFinished) {
  // Do Something
}];

• 或者你可以用代码通过NSURL来加载，这种情况一般是将动画效果保存在服务器，动态加载。

LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];

Lottie 支持iOS中的UIViewContentModes的 aspectFit, aspectFill 和 scaleFill这些属性。

• 你可以控制动画的进度

CGPoint translation = [gesture getTranslationInView:self.view];
CGFloat progress = translation.y / self.view.bounds.size.height;
animationView.animationProgress = progress;

• 想要任意视图来给Lottie View中的动画图层做遮罩吗 ？只要你知道After Effects中对应的图层的名字，那就是小菜一碟的事了：

UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:YES];
[lottieAnimation addSubview:snapshot toLayerNamed:@"AfterEffectsLayerName"];

• Lottie 带有一个UIViewController动画控制器，可以用来自定义转场动画！

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                          fromLayerNamed:@"outLayer"
                                                                                                            toLayerNamed:@"inLayer"];
  return animationController;
}

作者：奇怪的她的他
链接：https://www.jianshu.com/p/1f251a6e2e83
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。