bodymovin

感谢支持ayqy个人订阅号，每周义务推送1篇（ only unique one ）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译） 如果觉得弱水三千，一瓢太少，可以去 http://blog.ayqy.net 看个痛快 一.困境 做动画难免会有类似的经历： Digging through frameworks for reference, guessing durations, manually creating Bézier curves, and re-making animations with nothing more than a GIF for reference 照着GIF图/效果视频去模仿，猜测动画时长，手动创建贝塞尔曲线……反复调整参数，一遍遍目测效果，最后发现： 存在很多细节差异 效果不够细腻 由于兼容性等约束，有些效果没法实现 好不容易实现了，还原度却达不到要求。通常要么设计师妥协，要么坐一起再调个半天，改到对方满意为止，结果调整细节耗费的时间比预想的多好几倍，效果还是差强人意 有经验的设计师会从AE（Adobe After Effects）中粘出一些有用的信息，比如贝塞尔曲线参数、动画时长……甚至能够提供一些实现思路，但无论怎样， 照着视频实现动画就像临摹，效果差异几乎是不可避免的

本文编辑于OS X系统，之前出现过windows下看不到部分图片的情况，如有请大家告知 为什么需要Lottie 在相对复杂的移动端应用中，我们可能会需要使用到复杂的帧动画。例如： 刚进入APP时候可能会看到的入场小动画，带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候，研发复现成本高 总而言之，我们的难题是： 这些事情如果给我们用CSS3（Web）或者Animated（RN）去实现是非常棘手的，而且因为研发人员和设计师之间本身无法做到心灵相通，导致如果全部交给研发者完成效果，做出来的结果往往也不能让设计师满意。同时开发成本实在太高太高。 诶？ 那我们想，能不能把所有的动画交给设计师用设计工具（如AE）去做这些工作，然后直接导出一个文件给开发者去使用呢？如果这样，设计师就能完全独立自主，而开发者只要像“引用一张图片”那样去用这个动画就好了呀。 对，Lottie这个工具做的就是这件事。 Lottie动画简介 Lottie是一个用于Web和iOS（Android）的移动库，用于解析使用 Bodymovin 导出为json的 Adobe After Effects 动画，并在移动设备上呈现它们。设计师第一次可以创建和运送漂亮的动画，而无需工程师手工重新创建。 引用原文 Lottie is a mobile library for Web, and iOS that parses

为什么需要Lottie 在相对复杂的移动端应用中，我们可能会需要使用到复杂的帧动画。例如： 刚进入APP时候可能会看到的入场小动画，带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候，研发复现成本高 总而言之，我们的难题是： 这些事情如果给我们用CSS3（Web）或者Animated（RN）去实现是非常棘手的，而且因为研发人员和设计师之间本身无法做到心灵相通，导致如果全部交给研发者完成效果，做出来的结果往往也不能让设计师满意。同时开发成本实在太高太高。 诶？ 那我们想，能不能把所有的动画交给设计师用设计工具（如AE）去做这些工作，然后直接导出一个文件给开发者去使用呢？如果这样，设计师就能完全独立自主，而开发者只要像“引用一张图片”那样去用这个动画就好了呀。 对，Lottie这个工具做的就是这件事。 Lottie动画简介 Lottie是一个用于Web和iOS（Android）的移动库，用于解析使用 Bodymovin 导出为json的 Adobe After Effects 动画，并在移动设备上呈现它们。设计师第一次可以创建和运送漂亮的动画，而无需工程师手工重新创建。 引用原文 Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as