大发welcome

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

时间:2022.05.07作者:大发welcome浏览量:1059

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


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


常见的开发对接方法


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 是一种常用的视频花样,也通常运用于直接对接开发 。  


优点:兼容性好,文件能够快速输出,文件小 。  


缺点:视频花样项目中过多的话影响性能,效果会有压缩 。


以上介绍的几种动效落地计划,是目前比较主流的要领, 基本可以满足产品中动效落地,并且能够大大节省开发的时间和产品的稳定性 。

大发welcome(首页)官网登录back

大发welcome(首页)官网登录北京市丰台科技园
诺德中心一期2号楼803-805室

? Copyright 2008-2021 bjycxf.com

版权所有 京ICP备09080439号 京公网安备11010802012755号

大发welcome(首页)官网登录

过往皆为序章 未来一切可期

大发welcome(首页)官网登录

扫一扫,加我企业微信

sitemap网站地图