想让设计更酷炫？先学会 6 种常用的动效落地计划

时间：2022.05.07作者：德赢浏览量：1402

今天给各人分享在可视化设计中，最常用的动效落地计划先容，这一次是一个很是很是干的干货，手把手教你怎样配合开发将小动效在页面中展示出来。希望可以带给各人更多资助！

最近在做项目中遇到一些问题，有些效果开发实现出来跟现实相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别�；够嵊行┣樾问怯捎谙钅颗牌谖侍饪⒙涞赜幸欢ū厩�，希望能快速落地�Ｉ杏械目⒅苯铀蹈悴涣说鹊�。借这次整理一下动效落地历程中遇到的坑，同事睁开聊一下设计师对接前端做动效落地的一些最常用的要领，最后会把文中提到的插件软件整理打包分享给各人。

常见的开发对接方法

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 上，无需其他特殊操作。