恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

原来大厂的动效是这样落地的,难怪夸我做事靠谱

原创文章 分类: 经验/观点 版权: 举报
9368 332 344 15
2020-09-01
85.0
首页推荐

北瓜的第3篇原创文章

多多交流~

1. 前言 


北瓜所在的设计行业是做直播产品,经常接触到动效方面的需求,常见的有Loading动画、卡牌抽取动画、徽章展示动画等等。动画有简单的、有复杂的、有时间短的、有时间长的、有特效的,导致我们的落地方案呈现多样化。

上面所述的动画我们把它归类为:直接落地输出可见动画。


加载动画·北瓜练习



有朋友就有疑问了,难道还有不能落地的动画?那还叫动画吗。这个还真的有,它叫:间接落地交互动画。


间接落地交互动画:引导用户交互、页面转场、提高用户体验等。 


这种动画的输出是不需要很多软件和插件来配合的,只需要给开发提供一份动效输出文档,文档内容需要包括:标注动效前后静态设计稿,口头描述或可以演示的MP4,并且需要给到开发具体动效参数。(例:用户点击后购物车按钮尺寸100%-50%,旋转0°-180°,X轴位50px,Y轴位移20px,动效持续400ms)



交互动画·北瓜作品


本期就分享一线大厂都在用的落地方案(直接落地输出可见动画)!



2. 几种常用的输出方案 


1,设计师又爱又恨的GIF 

2,流畅稳定有损的视频

3,一般都会用到的精灵图

4,适合多特效的APNG/WEBP

5,近几年流行的落地格式LOTTIE/SVGA




3. GIF


GIF的全称是Graphics Interchange Format,可译为图形交换格式,实现和开发成本低的有损格式,仅支持8位256色但具有很强的兼容性, 


体积大,质量差,尤其是透明的动画一定要慎用。


1.1 PS + 视频输出:通过AE导出视频格式(AVI视频)后,再通过PS导出GIF



1.2 将视频拖进PS后,导出GIF操作如下“文件 —— 导出 —— 存储Web所用格式旧版 —— 存储完成”这样输出的质量偏差、体积一般。




2.1 PS + 序列图:通过AE导出PNG序列图后,再通过PS导出GIF



2.2 序列图文件夹拖进PS方法(文件 —— 打开 —— 选择第一张图 —— 必须勾选图像顺序 —— 打开)




2.3 导出操作方法和视频用PS导出GIF方法一样,这样输出的质量一般、体积一般。


注意:PS导出GIF有时会失败,北瓜猜测原因有这几种: 


1,动画时间过长
2,图像尺寸太大
3,FPS的数量限制(FPS就是每秒有多少帧)
4,莫名其妙的失败




3.1. 通过AE插件GIFGUN直接导出(之前有讲过方法的,忘记了的小伙伴可以百度哈),方便快捷、缺点是限制在30FPS内、输出质量差、容易掉帧。



推荐一个压缩GIF的软件:PPDuck(加微获取)



4. 视频 


实现成本低,兼容性强,能够直接播放视频、音频的有损文件,体积一般。一般用在宣传、开屏、演示如抖音、快手的开屏动画。讲下MP4的输出和压缩方案


1.1 将视频拖入PS,然后通过PS导出MP4




1.2  AE导出视频的方法:AE —— 合成 ——添加到渲染队列 —— 选择Quicktime —— 选择输出路径 ——确定




1.3  将视频拖入PS后导出MP4的方法:PS —— 文件 ——导出 —— 渲染视频 —— 命好名字 —— 选择文件夹(输出到哪)—— 品质高中低(品质越高内存越大)—— 渲染




2,压缩视频的方案有——Handbrake、格式工厂、Adobe Media Encode。使handbrake无需特别技巧便可直接将DVD电影内转换成AVI/MPEG4格式,还有MP4及OGM输出、AAC 及 Vorbis 编码。


5. 精灵图

序列帧是无损且低内存的格式,能在客户端使用,不建议在 Web 环境中使用(在网页中引发几十次的刷新),在工作中我们会经常遇到前端这样说帮我把图标合成一张“精灵图”吧,其实它的真正的名称是Sprite图,也就是说把需要的全部图标合成在一张背景图,这样就可以很好的解决问题,我们会使用到CSS Sprite Exporter这个脚本完成精灵图的输出。


先讲下CSS Sprite Exporter安装方法:访达 —— 应用程序 —— AE文件夹 —— Scripts —— ScriptUI Panels —— 将文件粘贴在这里。

文中讲的其它AE插件都是通过ZXP辅助安装(北瓜的第一篇文章有详细写到)。



AE脚本CSS Sprite Exporter,能够一键导出精灵图与开发所需的代码。导出使用方法:AE —— 窗口 ——  CSS Sprite Exporter




注意:默认为宽度为5000px,所以最终导出的大图宽度为5000px。参数设置好之后点击“生成”会导出两个文件代码和图片然后一并交给开发。




6. APNG/WEBP


APNG格式诞生于2004年,是基于png格式的动画格式图片,它的动图后缀依然是.png,因为兼容性问题没有像GIF这般普及,一张图看懂二者的优劣。



WEBP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,基本兼容所有的主流浏览器,相同的效果webp 格式要比 png 格式小出来大概一半的大小,同时他也兼容所有的安卓设备,像一些 ios 设备需要通过一定的方式才可以支持,不过相比来说各方面的表现都是非常优秀的。



导出:通过iSparta软件导出,将AE输出好的序列图拖拽到iSparta软件中点击开始即可导出APNG/GIF/WEBP(GIF通过此软件导出质量偏差)





7. LOTTIE/SVGA



抛开本质区别,二者是近几年最主流的动画落地方式,满足很多种类的矢量动画和图片动画,SVGA相对LOTTIE更加稳定但支持的AE特性也少一些。 


1,Lottie是airbnb开源的支持iOS、Android、React Native的动画库。原理是把我们的各种矢量元素以及位图图层以及他们的效果关键节点打包的形式行成一个 Json 格式的文行。导出用到的AE插件:Bodymovin


操作方法:点击AE —— 窗口 —— 扩展 —— Bodymovin —— 勾选绿圆圈、点击右侧三个绿色的点选择输出路径 —— 点击Render完成输出





2,SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。动画文件体积更小,播放资源占用更优,动画还原效果更好。导出用到的AE插件:SVGAConverter

操作方法:点击AE窗口 —— 扩展 —— SVGAConverter —— 选择输出路径 —— 开始完成输出





8. 总结 


北瓜讲了这么多的落地方案,那在工作中我们应该怎样选择适合需求落地的方案呢?


小总结来了,我们从“三个维度”去分析落地方案的适用性~


1,占用内存大小对比



2,质量稳定对比



3,支持的AE特效对比




自己学会分析,寻找最合适的动效求落地方案



10. 感言 


北瓜讲的这些基本上包含了大厂及主流的动效落地方案,感谢阅读~

总而言之动效的输出方案非常多样,互联网更新迭代的速度越来越快,保不准下次会出现更好的落地方案,也没有完美的一站式解决方案,身为设计师的我们要保持良好的洞察力,这样才能应对多种多样需求下输出的动效效果的落地。

文章里提到的导出插件:CSS Sprite Exporter/ Bodymovin/ SVGAConverter 文末自己下载。大家对动效有什么不懂得,欢迎看北瓜主页交流学习(附送PPDuck、iSparta)。



点个赞,比啥都强

Powered by Froala Editor

推荐人:

Jies_L
评分:

完整度:4星

启发性:4星

勤奋性:4星

排版布局:4星

推荐心得:
这这这动效落地讲解的也太详细了吧,赞赞赞

是北瓜呀

学习交流,微信:Blush626

2755粉丝/35关注

人气明星小有见解十佳作品首页达人砖家
我这样手把手教你,这个小动效肯定能学会了!为什么我做动效的效率提升了好几倍?原因都在这了!
2
网恋教父Giao哥

大神真不愧为设计界新一代的开山怪!本来我已经对这个领域失望了,觉得这个设计领域没有前途了,心 里充满了悲哀。但是看了你的这个作品,又让我对设计产生了希望。是你让我的心里重新燃起希望之火,是你让我的心死灰复燃,是你拯救了我一颗拨凉拨凉的心!本来我决定不会在网站回任何做品了,但是看了你的作品,我告诉自己这个作品是一定要回的!这是百年难得一见的好作品啊!苍天有眼啊,让我在优生之年得以观得如此精彩绝伦的作品!

精彩!

是北瓜呀

是北瓜呀

学习交流,微信:Blush626

人气明星小有见解十佳作品首页达人砖家

你确定要举报原来大厂的动效是这样落地的,难怪夸我做事靠谱

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年09月01日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN