具体的落地实现方式，基本分为代码实现、GIF、序列帧、JSON、WEBP、APNG、MP4，下面来依次说下这几种方式的优缺点和需要注意的地方。

大部分交互动效还是需要开发通过代码实现的，想要完全实现设计稿的效果，就需要对每一个分解行为进行标注——主要从运用对象、运动对象的变化属性、贝塞尔曲线数值【它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形】、运动时间、变化属性的描述五部分来分解标注。

AE插件Flow可导出贝塞尔曲线数值，贝塞尔曲线数值就是两个坐标值，分别代表运动速率曲线的两个手柄的坐标，通过这两个坐标便能够控制曲线的任意形状。

Gif与序列帧也是比较常用的动效导出方式，但也有各自的局限性。

GIF支持的颜色最多只有256种，而且对透明通道支持不友好，在输出透明背景的动图时会出现锯齿边沿，由于这种特性它只适用于色彩较少的动图，如果是色彩较多的大型图片它的表现力就有限了。

序列帧相对GIF来说很好的解决了颜色的支持数量太少和对透明通道支持不好的缺点，序列帧就是一张张的png图片所以他支持颜色达千万种，缺点就是文件较大更耗内存，小型动图时可以选择这种方式。

当动图色彩丰富且需要透明背景格式而序列帧文件又比较大时，GIF和序列帧就都不是合适的输出方式了，这时可以选择用WEBP或APNG格式。

WEBP目前已经比较稳定，所有主流的浏览器都可以支持，在移动应用上对安卓支持比较好，iOS应用通过一些代码框架也可以完美支持。

WEBP支持的颜色与png相当，并且完美的支持动图的透明通道且内存占用比GIF更低。

APNG基于PNG的位图动画格式，扩展方法类似网页的GIF 89a，第一帧是标准的单幅图像，动画不被支持时也可以正常显示第一帧画面。

目前已经比较稳定，所有主流的浏览器都可以支持，支持的颜色与png相当，也可以完美的支持动图的透明通道且内存占用比GIF更低。

Json是airbnb开发的一个开源工具lottie所导出的文件格式。

Lottie 在不需要对代码进行重写的情况下让工程师更加方便的创建更丰富的动画效果，不过缺点是不支持彩色渐变效果，如果想实现彩色渐变还需要配合其他插件。

参考文章