pg电子游戏

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

时间:2022.05.07作者:pg电子游戏浏览量:1432

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


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


常见的开发对接方法


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


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


弱点:视频名堂项目中过多的话影响性能 ,效果会有压缩。


以上先容的几种动效落地计划 ,是现在较量主流的要领 , 基本可以知足产品中动效落地 ,并且能够大大节约开发的时间和产品的稳固性。

pg电子游戏试玩(模拟器)官方网站 -手机版app下载back

pg电子游戏试玩(模拟器)官方网站 -手机版app下载北京市丰台科技园
诺德中央一期2号楼803-805室

? Copyright 2008-2021 bjycxf.com

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

pg电子游戏试玩(模拟器)官方网站 -手机版app下载

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

pg电子游戏试玩(模拟器)官方网站 -手机版app下载

扫一扫,加我企业微信

【网站地图】【sitemap】