在传统（手绘）一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理，一般是实习生或者初级艺术家在此基础上做一些其他性的工作，具体的说，他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅，更自然。还记得在小学的时候，老师告诉你电脑是笨蛋吗？电脑需要被告知一系列的确切步骤，他们才知道需要做什么。今天我们来看看这一序列的步骤或算法，帮助计算机绘制动画关键帧之间必要的中间画。

前段时间在《Lottie Web动效在React中的构建》一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效。在该文中，聊的主要是设计软件Figma、Sketch和AE软件之间如何通过相关的插件完成设计资源的互通，并从AE导出动效相关的JSON文件。这些都是最基本的操作链路，但在使用lottie-web还有相应的API可用来控制Lottie动效。今天这篇文章我们主要来聊聊Lottie Web动效的基本原理。

一直以来我都热衷于使用CSS来制作动效，特别是随着CSS Houdini的到来，能更轻易的帮助我们实现一些优秀的动画效果。但不管怎么样，她在制作动效，特别是创建引人注目的动画有时也非常的棘手。即使你对CSS制作动效非常的了解，但很难避免制作动效带来的高开发成本，也因此，开始探讨Lottie Web来快速帮助我们还原Web动画效果，提高效率，提升效果。不过是哪一种，都需要开发者对其有较深的了解，才能在开发动效的时候不会感到棘手。特别是在一些框架开发体系下（比如React）开发动效，更令大家感到困惑，不过幸运的是，Framer 为大家带来一个开源的React动画库，即 Framer Motion。

开发者基于Framer Motion可以制作出漂亮的动效，而且开发过程非常简单，甚至可以说是傻瓜式开发。这是因为Framer Motion为开发者提供了可用于开发动效的API。这些API都是声明式的，通过props来驱动的。在这篇文章中，我们将仔细看看如何使用Framer Motion帮助我们快速地创建令人敬畏的动效。如果你也对此感兴趣的话，请继续往下阅读。