Lottie：简单上手&高性能的动画方案（附精美Android-Lottie-Demo）

Lottie官方介绍

Lottie是支持Android，iOS，Web和Windows多个平台的库，并利用Bodymovin插件把Adobe After Effects（AE）动画解析成json文件，并可以在移动端或者Web上进行渲染显示动画。

Lottie - Behind the scenes of our new open-source animation tool

Behind the Scenes, Projects — Salih Abdul Karim

 

目录

Lottie动画演示

Lottie名字的起源

Lottie之外的选择

第一个Lottie Demo

参考资料

---

Lottie动画演示

 

Lottie名字的起源

Lottie是以一位德国电影导演和剪影动画的先驱者命名的。她最著名的电影是《阿基米德王子历险记 (1926)》，这是现存最古老的长篇动画片，比迪斯尼的长篇电影《白雪公主和七个小矮人(1937)》早了十多年。

 

Lottie之外的选择

1. 手工制作动画。手工制作动画对于Android和iOS跨端设计和开发来说需要大量的时间投入。通常很难甚至不可能接受花费这么多时间来制作一个动画；
2. Facebook关键帧。关键帧（Keyframes ）是一个来自Facebook上的新库。但是，关键帧不支持Lottie的某些功能，例如遮罩（masks）、蒙版（mattes）、修剪路径（trim paths）、虚线图案（dash patterns）等；
3. Gif。Gif的大小是bodymovin JSON的两倍多，并且呈现的大小是固定的，无法放大以匹配大机型或者高分辨率的屏幕；
4. Png序列。Png序列甚至比Gifs更糟糕，因为它们的文件大小通常是bodymovin json的30-50倍，而且无法放大；