之前做运营活动的时候，写了一个比较有趣的打开盲盒的交互动画。由此来和大家聊一聊前端的动画方案，掰一掰 Lottie！

Want a Lottie alternative that is faster, smaller, consumes less memory, and is fully interactive?

本文主要讲述从AE的bodymovin插件导出的JSON文件到OC的数据模型，再将数据模型拆解成独立图层，并为图层添加动画的过程。

在今年的余额宝年年有余活动中，作者使用oasis 引擎，实现设计师设计的lottie摄像机效果的实战。

设计的本质是为了解决问题，制定设计原则时需要建立在这个设计的中心思想之上。 其核心可划分为两个维度：审美交互维度、开发实现维度。

“QQ表情怎么突然变大了？”“这么丝滑Q弹，忍不住多看几眼，越看越上头。”这些让你一眼上头的丝滑QQ大表情，既不是bug，也不是简单的表情放大。这些生动的表情背后，是QQ团队历时几个月对表情设计与技术的研究创新。无比流畅的表情背后，是一个完全革新的表情制作技术和一种全新的表情格式--Lottie超清表情。

Lottie 动画方案、使用方法、与 Gif 动画的性能测试对比，以及在飞书中的应用和注意事项。

lottie-web 可以帮我们实现非常炫酷的动画效果，那么它是如何实现的呢？笔者对动画实现和原理做了一次梳理，整理了下面的文档供大家参考。

Lottie 是一个跨平台的动画库。设计小姐姐使用 AE 制作并导出的动画文件（ JSON 格式），Lottie 可以在各个终端快速解析这个 JSON 文件，从而还原动画，简单快速。

一份可以快速开始的使用教程

Lottie for Flutter

在海外项目中，为了优化用户体验加入了几处微交互动画，实现方式是设计输出合成的雪碧图，前端通过序列帧实现动画效果： 序列帧：动画效果：序列帧：