前言

Lottie是工作中常见的动画格式。并在移动应用程序、Web应用程序和其他平台上播放这些动画。在使用Lottie制作动画时，需要遵循一定的工作流程，本文将介绍Lottie的工作流。

是什么

Lottie是一款由Airbnb开源的轻量级、高效的动画库，可以将Adobe After Effects中制作的动画导出为可缩放的JSON文件，并在移动应用程序、Web应用程序和其他平台上播放这些动画。

使用了Bodymovin插件将After Effects中的矢量图形、形状、蒙版、插值动画、图层效果等转换为JSON文件，并提供了一套API和SDK，可以方便地将这些动画集成到应用程序中。

支持动画的缩放、插值、交互等效果，大大提高了动画的制作和集成效率，同时也提高了用户体验和交互效果。

常规场景是什么

图标动画

After Effects中制作的矢量图形动画导出为JSON文件，然后无缝地嵌入到UI设计中。这样可以增强图标的交互效果和用户体验，降低图片的内存。

页面过渡动画：

制作页面过渡动画，比如页面跳转、菜单展开、折叠等。这样可以增加页面的流畅性和美观度。

加载动画：

制作页面或应用程序的加载动画，比如旋转、波纹、进度条等，增加用户等待过程中的娱乐性和体验感。

其他动画效果：

制作各种其他动画效果，比如气泡、闪烁、烟花等，增加页面的趣味性和美观度。

怎么做

制作

安装Bodymovin插件。该插件可以将After Effects中的图形、形状、蒙版、插值动画、图层效果等转换为Lottie支持的JSON文件。可以在Github上下载最新版本的Bodymovin插件

Bodymovin插件可以在Github上进行下载，具体下载地址如下： https://github.com/bodymovin/bodymovin/releases 在该页面中，可以选择最新版本的Bodymovin插件进行下载，同时也可以查看该版本的更新日志、文档和示例等信息。

下载后，需要将插件文件解压缩到After Effects的插件目录中，然后重启After Effects即可使用。

导出格式

Bodymovin

一种基于JSON格式的动画导出格式，可以将Adobe After Effects中的图形、形状、蒙版、插值动画、图层效果等转换为Lottie支持的JSON文件。Bodymovin格式是Lottie最原始的格式，可以在Lottie的各个平台上使用。

Lottie

一种优化过的JSON格式，比Bodymovin更小、更快，同时支持更多的特性，比如支持图片、遮罩、混合模式等。Lottie格式是Lottie推荐使用的格式，可以在Lottie的各个平台上使用。

Lottie Android

一种专门为Android平台优化的格式，可以在Android上更好地支持Lottie动画。Lottie Android格式是基于Lottie格式的，可以在Android Studio中使用。

Lottie iOS

一种专门为iOS平台优化的格式，可以在iOS上更好地支持Lottie动画。Lottie iOS格式是基于Lottie格式的，可以在Xcode中使用。 这些格式之间的区别在于支持的特性、大小、性能等方面有所不同。

分别的优势是什么

Bodymovin是最原始的导出格式，支持的特性较少，但是在各个平台上都可以使用；Lottie是一种优化过的JSON格式，支持的特性更多，同时也更小、更快；Lottie Android和Lottie iOS是专门为Android和iOS平台优化的格式，可以在相应的开发工具中使用，同时还支持更多的特性和性能优化。

如何集成

首先将Lottie文件添加到应用程序项目中。可以将Lottie文件直接添加到应用程序的资源目录中，或者使用第三方库进行管理和加载。

如果使用第三方库，可以考虑使用Lottie Android、Lottie iOS等官方提供的库，或者使用其他第三方库，比如airbnb/lottie-android、airbnb/lottie-ios等。 

在应用程序中加载和显示Lottie动画。可以使用Lottie库提供的API，比如LottieAnimationView、LottieDrawable等，加载和显示Lottie动画。可以设置动画的路径、速度、循环、交互等效果，以及处理动画的事件和回调等。

优化Lottie动画。

为了提高应用程序的性能和体验，可以对Lottie动画进行优化，比如压缩JSON文件、减少关键帧、使用缓存等。可以使用Lottie提供的在线工具或其他工具进行优化，也可以手动进行优化。

调试与优化

工具优化

官方提供的在线工具。

Lottie官网提供了一些在线工具，比如LottieFiles、LottieFiles Converter、LottieFiles Preview等，可以帮助用户调试和优化Lottie动画文件。比如，LottieFiles可以搜索和下载Lottie动画文件，预览和分享动画效果，Converter可以将其他格式的动画文件转换为Lottie格式，Preview可以在移动设备上预览Lottie动画效果。

提供的API

Lottie库提供了一些API，可以设置动画的路径、速度、循环、交互等效果，以及处理动画的事件和回调等。可以使用这些API调试和优化动画效果，比如暂停、设置速度、添加循环等。

其它工具

除了Lottie官方提供的工具和API，还可以使用其他工具进行优化，比如Bodymovin、JLottie、Lottie Viewer等。比如，Bodymovin可以将After Effects中的动画导出为Lottie格式，JLottie可以在Java中使用Lottie动画，Lottie Viewer可以在Web浏览器中预览Lottie动画效果。 

优化动画本身

优化动画文件本身。为了减小动画文件的大小和提高性能，可以使用一些优化技术，比如压缩JSON文件、减少关键帧、使用缓存等。可以使用Lottie提供的在线工具或其他工具进行优化，也可以手动进行优化。

反复测试和开发反馈

在应用程序中测试和反馈Lottie动画效果，可以帮助发现和解决问题，比如性能问题、兼容性问题、交互问题等。可以使用模拟器或真实设备进行测试，也可以向用户收集反馈和建议，不断改进和优化Lottie动画效果。

注意点是什么

尽量多用矢量图形

尽量使用矢量图形，以保证在不同分辨率下的清晰度。

图层优化

尽量使用简单的图层结构，避免过多的嵌套和复杂的图层样式，以提高导出效率。

随时准备替代方案

在设计动画时，要考虑到Lottie的限制，如不支持AE中某些效果和动画属性，需要做好相应的替代方案。 

选择导出范围

选择要导出的区域，可以选择整个合成或者是选定的区域。

导出设置

在AE的导出设置中选择Bodymovin插件，然后设置导出选项，如输出路径、帧率、分辨率、颜色深度等等，最后点击导出按钮即可将动画导出为Lottie JSON格式的数据。 四、注意事项 在导出Lottie时，需要注意以下几点：

总结

Lottie是一款非常好用的动画库，可以大大提高动画的制作和集成效率。在使用Lottie制作动画时，需要遵循一定的工作流程，包括制作动画、导出JSON文件、集成到应用程序中、调试和优化等步骤。只有在遵循正确的工作流程的情况下，才能制作出高质量的动画效果。

Powered by Froala Editor