Lottie将“影视特效”带入iOS

Zombie2010年学习参与影视后期制作，13年起开始做iOS。
但直至今日我依然喜爱影视制作，交我手的镜头每个都有瑕疵，而从我手里出去的镜头一定是视觉上最完美的，就和编程一样。
而如今Lottie和bodymovin插件的出现，虽然有一些瑕疵，但将特效和编程结合的这个心愿已经达成，我真是爱不释手！

“特效” 可以带入编程？别逗我，我一定要喷你！

如果你看到标题后有这样的内心活动，OK我先不怪你们，因为这篇文章就是教你如何将特效制作的项目，带入编程。

---

重磅介绍Lottie

Lottie是一个可以解析使用【bodymovin】插件从Adobe After Effects中导出的格式位json的文件，并可以在iOS、Android、MacOX、React Native、中进行解析使用的开源库。

先看一下官方的展示效果图

1.gif

2.gif

应用场景：

• APP开发中，需要实现设计师提供的动画效果，我们需要通过代码来实现，面临APP包大小、内存问题。头疼。
• 更有复杂的动画，开发的小伙伴们会好肥大量时间去失效效果。费时、费脑、费心、简直精神折磨。
• 面对等等的问题..有了Lottie后，我们开发和设计就可以仰天长啸了。

Lottie支持平台：

• 目前支持：iOS、MacOS、Android、React Native、html、Swift
• iOS支持iOS8以上版本、安卓需要API14以上。
• iOS11即将问世，而苹果官方主要只维护最高的两个版本用户，所以 I don't care。
• 咨询了安卓的小伙伴API14已经是安卓4.0的时代了，目前已经API24了，所以安卓的小伙伴也可以 Don't care it，Yo！(这里感谢安卓伙伴支持)

准备步骤

1. 安装Xcode直接Store下载，不多解释。

2. 安装Adobe After Effects，直接从Adobe商店下载，需要安装AE CC2014以上的版本。

   这里注意：如果你从没有接触过AE，也不想学习国外教程做一些高难度特效，那中文版是你最佳选择。

   下载入口https://creative.adobe.com/addons/products/12557

3. 下载bodymovin插件。入口https://github.com/bodymovin/bodymovin
   

   

   3.png

4. 根据不同的环境选择下载插件安装器。入口http://aescripts.com/learn/zxp-installer/
   

   

   4.png

5. 插件安装器下载成功后，根据提示安装插件即可。看到如下安装成功的截图，就代表安装完成！

   
   
   

   5.png

安装总结：
到此，Zombie需要提醒一下大家，每个环境安装插件可能有小几率发生异常、或错误。如果遇到问题切记不要抓狂，请耐心阅读步骤，或在网络上查找解决问题的方法。

执行步骤:

1. 打开AE，Zombie的AE是英文版本，如果你是中文版也不用担心，意思是一样的，我也会给大家进行翻译。选择首选项—>常规。

   
   
   

   6.png

2. 必须要勾选设置框中的 “允许脚本写入文件和访问网络”。

   
   
   

   7.png

3. 设置OK以后，我打开我的一个项目为例子，选择窗口—>扩展—>Bodymovin。选择后出现Bodymovin的操作面板，Render按钮代表着渲染，Preview可以查看已经渲染过的视图，Setting是一些渲染的参数，右边点击“…”可以设置输入文件路径。简单了解后我们选择要渲染的图层，设置要输出json文件的路径后，点击渲染。

   
   
   

   8.png

4. 点击渲染后，界面进度条会一直加载。如果你的界面显示Renders Finished，绿色按钮变为Done的时候，恭喜你输出成功。

   
   
   

   9.png

5. 这个时候我的桌面就出现data.json这个文件。具体json内容如图。

   
   
   

   10.png

6. 点击Preview—>Current Renders—>选择刚渲染的合成—>进入预览，你可以在这里拖拽进度条逐帧查看刚刚渲染的json动画效果。

   
   
   

   11.png

AE总结：

至此位置，恭喜你，已经完成了一大半工作了。
这里Zombie特别提醒一下，进行渲染输出json后，因为AE软件中一些复杂特效、粒子特效Lottie目前还无法支持。
所以bodymovin中预览效果可能会和手机终端显示的效果不一样！
但是和网页显示基本没有任何不同。虽然网页和手机的渲染类型和插件支持效果不太一样，针对这一块github作者主页中并没有说明。

iOS执行步骤

1. 首先我们导入Lottie开源框架到项目中。

• 这里大家可以使用cocoapods、Carthage方式集成，也可以直接到github官网搜索Lottie-ios导入开源库，集成问题Zombie不做过多解释，有问题的小伙伴请自行Google。
• 本人不太喜欢用cocoapods方式来集成三方库，优缺点自己衡量，所以这里就不做过多介绍。

2. 将前面步骤通过AE生成的json格式文件导入项目中。

   
   
   

   12.png
3. OK，集成成功后，接下来在要使用动画的文件中引入头文件

#import 

4. 引入头文件后，我们来实现一个简单的效果

   LOTAnimationView *laAnimation = [LOTAnimationView animationNamed:@"(Json文件名称)"];
   laAnimation.contentMode = UIViewContentModeScaleAspectFit;
   [view addSubview:laAnimation];
   laAnimation.frame  = CGRectMake(0, 0, (你要展示的宽度), (你要展示的高度));
   [laAnimation playWithCompletion:^(BOOL animationFinished) {
       [laAnimation removeFromSuperview];
   }];
   

13.gif

14.gif

Lottie暂不支持的属性:

Even-Odd winding paths
Merge Shapes
Trim Shapes Individually feature of Trim Paths
Expressions
3d Layer support
Gradients
Polystar shapes (Can convert to vector path as a workaround)
Alpha inverted mask

Lottie总结:

• 先来说一下使用Lottie的优点：
• 开发成本低，只需要设计输出json文件即可。
• 大大的节约程序员用代码写动画的时间成本。
• 支持URL方式远程加载动画，这样可以在服务器部署json文件，在不更新Store的前提下更新动画内容。
• 提高性能，大大的节省了内存的使用。
• 跨平台，前段终端一次搞定！
• 支持转场动画。 PresentViewController／DismissViewController 时可以做转场效果。

Lottie目前的不足：

• 基本只支持路径动画，多数特效不支持。
• 没有实现交互功能。
• 针对iOS和安卓版本的限制。
• 这篇内容主要是带入大家了解入门这个插件和库的配合使用。
• 我后续也会继续做出更好的效果分享给大家，再次感谢利泰提供这个平台可以让我给大家分享一些我所了解的知识，互相学习。

先写到这，Zombie要睡了！晚安。