北京哪有诊疗白癜风医院 http://www.znlvye.com/m/01
背景
最近一周负责公司在线客服产品线H5页面，其中需要设计客服点击入口的动效，动效设计是UI设计中不可缺少的一部分，第一次我选择的方案是拿AE设计好GIF图交接给开发，但后来产品提测的时候发现自己踩了好大的坑，GIF的锯齿让客服点击入口动画毫无违和感，更不要说提高用户的点击率了。看来都年了，GIF基本只会出现在两个地方，一个表情包，另一个是类似于澳门赌场的广告闪烁。GIF这条路走不通之后和之前的动效设计师同事交流和资料的收集之后，选择了lottie动画的交付方式。
因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过AE或者其他工具做出炫酷的效果，和开发对接就懵了。要么无法实现，要么极其复杂。毕竟开发工程师要通过代码把动效实现出来，设计师得用开发所能理解的语言来描述。而今天要说到的Lottie不仅可以%还原动效，而且无需动效标注。直接通过AE输出动效文件给开发。开发人员直接调用，然后完美还原。对于做动效的设计师简直太香了，今天就给大家介绍一下如何用sketch做lottie动画交付开发，避免大家做动画时候像我一样踩坑。
PS：GIF在网页中长盛不衰，其优点很明显，那就是制作简单，使用方便。但是缺点也很明显，首先给大家补充几点GIF的缺点：
色彩空间只有色，比jpeg，png少很多，画质也差了许多只支持0或的透明度，设计师经常会在icon边缘处加入投影，可能会引起毛边体积比png序列帧的图可能还要大，比如，相同的40帧动画图，GIF体积为kb，而png经过tinypng压缩后为42kb没有可控性，GIF图是预先导出好的动画序列，但CSS逐帧动画是由CSSanimation来控制播放进度
02
Lottie是什么
Lottie是Airbnb开源的一个动画渲染库，同时支持Android、iOS、ReactNative平台。Lottie支持渲染播放AE动画。通过AE插件bodymovie导出json文件作为动画数据。Airbnb的开发者将其作为一个开源平台，不仅是为了免费发布，也是为了打造一个社区。他们创建了一个github地址（
