尊龙凯时

今天给各人分享在可视化设计中

，最常用的动效落地计划先容

，这一次是一个很是很是干的干货

，手把手教你怎样配合开发将小动效在页面中展示出来
。希望可以带给各人更多资助！

最近在做项目中遇到一些问题

，有些效果开发实现出来跟现实相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别
�；够嵊行┣樾问怯捎谙钅颗牌谖侍饪⒙涞赜幸欢ū厩�

，希望能快速落地
�Ｉ杏械目⒅苯铀蹈悴涣说鹊�
。借这次整理一下动效落地历程中遇到的坑

，同事睁开聊一下设计师对接前端做动效落地的一些最常用的要领

，最后会把文中提到的插件软件整理打包分享给各人
。

常见的开发对接方法

1.GIF

2.PNG 序列

3.APNG

4.Lottie

5.SVGA

6.MP4

Gif 是现有市面上应用最普遍的动效名堂了

，最早起始于 1987 年 由 CompuServe 公司引入
。

优点：兼容性好险些以是浏览器都支持、文件能够快速输出
。  

弱点：颜色仅支持 8 位 256 颜色

，支持半透明、颜色有限导出文件体积大并且有锯齿

，效果差透明导出会有白边
。  输出：GIF 文件有多种输出要领这里给各人枚举较量常用的

，各人按需使用
。

PNG 序列 由 PNG 图片组成的序列帧
。  

优点：兼容性很是好、效果还原高、颜色富厚
。  

弱点：文件较量大

，动效较量重大的话输出 png 序列可能好几百张

，会影响浏览器性能
。  输出：可 ae 等动效软件直接输出
。

APNG APNG 是一个基于 PNG 的位图动画名堂

，它的动图后缀依然是.png
。  

优点：颜色富厚

，支持 1600 万种颜色

，支持渐变透明

，无损压缩
。  

弱点：文件过大

，兼容性差受浏览器、系统版本等限制
。  在 web 端关于主流的浏览器 Firefox、Safari、Chrome 都能够兼容
。

Lottie Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决计划

，用 AE 做完动画后

，使用 Lottie 提供的 Bodymovin 插件将导出成 JSON 名堂

，就可以直接运用在 Web 上

，无需其他特殊操作
。

优点：文件小、颜色富厚

，开发可以控制巨细、速率、循环次数等参数
。  

弱点：不支持渐变、粒子、阴影透视等效果

，表达式也只支持一部分

，部分位图文件输出的效果失真

，需手动替换
。

SVGA SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画名堂
。 

 优点：便捷 SDK 开发集成办法轻松简朴
。支持大部分效果、体积小、动画还原效果好  

弱点：有损压缩

，兼容性不太好有的平台不支持

，移动端用的居多

MP4 MP4 是一种常用的视频名堂

，也通常运用于直接对接开发
。  

优点：兼容性好

，文件能够快速输出

，文件小
。  

弱点：视频名堂项目中过多的话影响性能

，效果会有压缩
。

以上先容的几种动效落地计划

，是现在较量主流的要领

， 基本可以知足产品中动效落地

，并且能够大大节约开发的时间和产品的稳固性
。