Lottie.js的入门
大约10年前，网络动画遇到了大麻烦。Adobe Flash正在消亡，但仍然没有明显的替代品。我们需要一种快速、易于创作、对网络友好的格式，能够上演更大规模的动画演示、卡通和横幅。
令人高兴的是，2014年AirBnB为我们提供了他们的解决方案--Lottie.JS。
什么是Lottie？
Lottie.js是一种开源的、基于矢量的动画格式，由AirBnB经验和动作设计师Salih Abdul-Karim创建。Lottie引擎被设计用来在Web、iOS、Android、Windows和React Native上呈现快速、清晰、低带宽的矢量动画。
简而言之，如果你喜欢用SVG制作图像，Lottie是为这些矢量图制作动画的好方法。如果你想用更轻、更快、更可扩展的东西取代GIF、MPEG或CSS动画，Lottie很可能是你最好的答案。
Lottie在行动。巴希尔-艾哈迈德创作的《水手男大力士》。
正如Bashir Ahmed的漂亮例子所展示的那样，Lottie可以从很小的文件中产生丰富的、轻盈的、流畅的动作--这个动画是从一个54kb的文件中产生。
像巴什尔这样的Lottie动画，最基本的是只需要两个文件:
- Lottie动画播放器(Lottie.js)
- JSON动画说明文件
我为什么要选择Lottie？
对网络矢量进行动画的方法有很多--从CSS动画到SVG的SMIL再到GreenSock、AnimeJS和其他JavaScript库。
然而，Lottie有一个杀手级的 "一拳"，那就是:
- 一个不断增长的高质量视觉动画工具的生态系统
- 输出流畅、快速、高效、可编写脚本的动画的能力
尽管Adobe Flash的问题有据可查，但它长期以来的成功是基于将一个好的创作工具与简单的跨平台部署相结合。我认为Lottie也具有Flash的一些优势。
如何创建一个Lottie动画？
由于Lottie文件只不过是JSON文本文件，从技术上讲，你可以直接在任何IDE中编码你的动画。实际上，你需要选择一个 "支持Lottie "的动画工具。下面是我对我试过的一些工具的看法。
Lottie工具综述
在我看来，在选择Lottie Animator时，有两个因素需要考虑。
- 它是一个好的动画工具吗？
- 它是否容易部署你的Lottie代码？
我将针对每个工具分别介绍这两个方面。
Adobe After Effects
After Effects的功能很多。但它是否太多？
好吧，这可以说是一个有争议的观点，因为Lottie格式是为After Effects建立的，但我不认为AE是最好的Lottie创作平台......对大多数人来说。
首先，它并不便宜。如果你已经支付了Creative Cloud的订阅费，那么成本就不是问题。但是，如果你目前不是CC用户，你将会被咬掉21美元/月的新的持续最低费用。
其次，Lottie被认为是一种 "黑 "After Effects来制作网络图形的巧妙方法。虽然After Effects是一个非常强大的工具，但它被设计用来制作从好莱坞特效到电影标题序列到3D游戏剪辑到大预算电视广告的一切。有一大堆东西你根本不需要或不想要。
如果你已经是一个 "After Effects大师"，通过各种手段，利用你来之不易的才能，做出令人惊奇的东西。同样，如果你是一个Windows或Linux用户，After Effects可能仍然是你最可行的选择。
然而，如果你现在是一个基于Mac的AE新手，有一种说法是，使用After Effects制作Lottie动画就像从航空母舰上滑水一样。
当然，你可以做到这一点，但有更简单的方法。
俳句动画师
在我写这篇文章的时候（2022年），Haiku Animator似乎是一个悲剧性的受害者，在错误的时间成为完美的产品。
动画工具
Haiku于2018年推出，从一开始就被打造为设计和代码的理想融合。动画工具丰富而强大，用户界面快速而合理。
Haiku的动画界面
输出选项
然而，对我来说，Haiku的导出工具才是它真正区别于其他东西的地方，它为React、React Native、iOS、Android、Vue和Angular以及传统的GIF和视频提供随时可用的代码。
Haiku的导出选项
遗憾的是，随着团队转向另一个产品，Haiku的开发在2020年的某个时候开始逐渐停滞。他们在2021年底正式开放了Haiku的代码库。显然，如果你通过安装过程，它仍然可以工作，但未来的发展和支持前景似乎很不稳定。
综上所述...
我在这里提到Haiku，只是希望在你看到这篇文章的时候，它已经恢复了。它是一个优秀的产品（我为它付出了代价），我们非常怀念它。
Flow- ("为什么不呢？"的选择)
Flow可以说是Haiku遗产的合理继承者--一个功能很好的动画器，为一系列流行的网络和移动平台提供整洁的、可制作的Lottie代码。
顺便说一下，它在我的MacBook上安装的重量为88Mb，这对空间有限的人来说很方便（我就是这样）。与Haiku不同，目前没有提供Windows或Linux选项。
动画工具
尽管Flow主要针对Sketch用户，但它几乎可以与你提供的任何SVG文件一起工作。导入和同步我的Figma文件很简单，Flow甚至在我给它的两个静态SVG框架之间的 "智能自动动画 "状态上做得很好。它并不是完美无缺地导入了我所拥有的东西，但它的能力足以让人满意。
Flow并没有提供很多内置的绘图/形状/文字工具。归根结底，这并不是什么大问题，因为Flow和Figma/Sketch之间的同步工作非常好，这有助于保持Flow动画用户界面的清晰和不乱。
Flow的用户界面
代码导出
Flow提供了出色的Lottie导出功能，但你需要选择两个高端计划中的一个来使用它。
- 免费。大多数动画工具
- 媒体：99美元/年 - 增加视频导出选项（MP4、PNG、GIF等）
- 代码+。199美元/年 - 大多数代码输出选项（Lottie for Web、Animated SVG、HTML等）
- 专业版：299美元/年 - 所有视频和代码输出选项
代码+"层让你可以导出Lottie for Web，不过，令人略感失望的是，你需要升级到顶级的专业用户计划，以获得Lottie for iOS和Android的使用权。这对你来说可能是个问题，也可能不是问题。
综上所述...
Flow不是最便宜的选择--在After Effects的范围内--但如果你经常做动画，它也不贵。它是一个有吸引力的、设计精巧的工具，完全适合以合理的价格创建和部署Lottie动画。
钥匙形状
Keyshape是一个优秀的产品，只有两个问题:
- 它只适用于macOS。
- 它有一个非常平淡无奇、几乎是天真的网站。
Keyshape的网站并没有让你充满信心。
我承认我在下载Keyshape时期望很低。网站上喊着 "业余爱好者的动画玩具"，而不是 "严肃的专业动画工具"。适度的定价（29美元）支持了这个想法。这个价格不可能是好东西，对吗？
令我惊讶的是，Keyshape比我预期的要好得多。它实际上是非常好的!
动画工具
Sketch App作为一个动画师。
在我的Mac上，Keyshape App的安装量略低于100Mb。左侧的工具面板包含了大约十几个基本的矢量编辑工具--线条、矩形、圆形、文字等等。虽然我怀疑我们大多数人都会使用Illustrator、Figma或Sketch来创建我们的矢量艺术作品，但能够在你的动画片中进行简单的编辑还是很有用的。
Keyshape可以让你创建基本的 "符号"，然后根据你的喜好来操作许多实例。
动画时间线沿着底部面板运行。当你在画布视图中转换你的作品时，自动关键帧功能会创建新的关键帧。点击 "tweened "部分，你可以访问不同的缓和功能--包括可定制的立方体--beziers。
右边的面板让你对你选择的任何画布对象进行精细控制。正如你所期望的，这包括缩放、倾斜、旋转、XY位置和混合模式，但也让你控制SVG过滤器，如模糊、阴影、对比度和色调。
导出工具
Keyshape提供了一系列的导出选项，包括MPEG、GIF、SVG动画、CSS、sprite sheets、自定义JS，甚至PNG图像序列。
Keyshape的导出对话框--安装了Lottie插件后
请记住，Lottie并不是Keyshape的一个默认导出选项。你需要为Keyshape安装免费的Lottie插件才能使用这个新的超级功能。
Keyshape缺少什么吗？
Keyshape没有为React、Node、Vue或任何其他流行的开发平台提供任何组件导出设施，所以你可能需要自己解决这部分问题。
它并不像Flow那样试图在导入的SVG关键帧之间 "智能自动生成 "间隔状态。
但总的来说，在使用Keyshape App时，我并没有错过任何其他明显的东西。
总的来说...
我很喜欢动画，尤其是Lottie，但事实上，这并不是我大部分工作时间的来源。我想做得更多，但几个月过去了，我可能不会碰一个动画项目。我真的想要另一个月度订阅吗？也许不需要。
对我来说，Keyshape所提供的功能似乎很划算，即使它隐藏得很好。
Keyshape的细节
洛克特文件
试图给Lottiefiles.com贴上一个标签并不容易，因为他们提供了很多东西。这包括一个活跃的Lottie社区、一个Lottie资产市场、Lottie教程，以及Lottie展示、预览和托管应用程序。可以说，他们对Lottie的未来已经全力以赴了。
Lottiefiles编辑器
LottieFiles还提供了一些简单的Lottie编辑工具。这些工具包括
- SVG到Lottie工具:它允许你将预设的动画拖放到你上传的SVG上。
- Lottie编辑器:一个简单的编辑器，让你在任何预先存在的Lottie文件上调整时间和尺寸。
- 一个可定制的网络播放器:在将任何Lottie动画嵌入到您的网站之前，可以对其进行调整。
Lottie文件:他们的SVG转Lottie工具
坦率地说，使用LottieFiles工具从头开始创作复杂的作品是很困难的，但那里有足够多的有用资源，值得你去做。
值得一提的是我还没有测试过的
- Cavalry:我不会假装我已经测试过Cavalry--因为我没有--但功能看起来非常好。有一个免费计划（我想这是新的），所以没有理由不尝试。
- Synfig:Synfig是一个开源的2D动画器。它有一个很好的功能集，但它的用户界面与Flow和Cavalry等现代应用程序相比，感觉有点老旧和生硬。但如果你预算紧张，它很难比得上免费的。
- Lottielab:Lottielab将是一个基于浏览器的应用程序，似乎将自己定位为 "Figma of Lottie动画师"。UI看起来不错。他们提到每月15-25美元的订阅价格。不幸的是，我无法评论Lottielab，因为它至少在12个月内一直处于严格限制的私人测试阶段。我个人在2021年9月初（10个月前）加入了测试版的等待名单，现在仍然只能进入Lottielab Discord频道。我们将在未来的某个时候看到。
TLDR
如果创建轻量级矢量动画占用了你大量的时间，Flow可能是目前最集中、最完整的Lottie开发工具。它有一个清晰的工作流程，导出选项和大多数竞争对手一样好，甚至更好。
如果你已经知道并喜欢Adobe After Effects，那就用你知道的东西。
就我而言，我喜欢动画，但这并不是我大部分工作时间的来源。几个月过去了，我可能都没有碰过一个动画项目。我真的想再订一次月票吗？可能......不需要。
